28172 sujets

CSS et mise en forme, CSS3

[Résolu] Casse-tête, hauteurs de divs

Bonjour à tous

pour mon site IDSORTIE j'ai un petit soucis sur la div de gauche. La div1 (voir schema) fait 100%de la hauteur de la page.
La div2 a une hauteur variable, elle s'adapte à son contenu qui mui-même dépend du contexte. Jusqu'ici pas de soucis

La div3 en dessous contient la liste des sorties. J'aimerais que la DIV3 occupe 100% de la hauteur entre le bas de la div2 et le bas de la page, et si le contenu de la DIV3 n'entre pas dans cette hauteur il faudra scroller. J'ai un peu de mal à trouver la solution idéale qui permet de faire çà proprement.

upload/48586-Sansnom1.gif
Essayes ce gabarit, il y a sans doute des imperfections dans le code mais ça fonctionne.

<!DOCTYPE html>
<head>

<style>
html, body{margin:0px; padding:0px; width:100%; height:100%;}

#wrap{width:100%; height:100%; background-color:black; position:fixed;}

#right{height:100%;float:right;}

#high{width:400px; height:auto; padding:20px; background-color:blue;}

#low{width:400px; height:100%; overflow-y:auto; padding:20px; background-color:green;}
</style>

</head>

<body>

<div id="wrap">

<div id="right">

<div id="high">High</div>

<div id="low">Low</div>

</div>
</div>

</body></html>

EDIT: Je ne peux pas supprimer le post il semble que j'ai parlé trop vite le code fonctionne dans un simulateur en ligne mais pas chez moi...
Modifié par Cyberdome (18 Sep 2016 - 18:32)
flex est la solution miracle, seul soucis la compatibilité ascendante, je vais faire quelques tests avec d'anciens IE.

Merci.
Modifié par DJousto (19 Sep 2016 - 19:53)
Sujet clos
Aller à