Deux div avec height fixe et variable

Version imprimable

Bonjour,

A l'heure actuel ma page est comme ceci :
Code:

1 2 3 4 5 6 7 8 <div id="div1"> <div id="div2" style="max-height: 55%;overflow:auto"> //Content dynamique </div> <div id="div3" style="height: 45%"> //Content fix </div> </div>
J'aurais voulu que mon div3 soit collé en bas de mon div1 et de hauteur fixe (ex:400px),
et que mon div2 comble l'écart entre le haut de mon div1 et le début de mon div3 (avec scroll si il y trop de ligne à l’intérieur, pour que le scroll n'apparaisse dans mon div1) , mais je n'y arrive pas.

En gros il me faudrait un truc du genre

Code:

<div id="div2" style="height: 100%-400px ;overflow:auto">

où les 400px correspondent au height de mon div3
mais évidement sa ne marche pas ...

Auriez vous une solution ?

Cordialement

09/04/2014, 22h29
NoSmoking

Bonjour,
c'est le principe des footer en bas de page, à voir entre autres
:fleche: Page "pleine" sur les navigateurs
...à adapter bien sûr !

Si tu n'as rien contre l'usage de display:flex; (pour navigateur recent) tu peut gerer ce genre de comportement assez aisement:
http://codepen.io/gc-nomade/pen/smftB/

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="div1">
     <div id="div2" style="max-height: 55%;
                           height:auto;
                           background:pink;
                           overflow:auto;">
 
       //Zone defilante<br/>  <br/>  <br/>  <br/>  <br/>  <br/>  
       //Content dynamique<br/>  <br/>  <br/> <br/>  <br/>  <br/> 
        <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/> 
     </div>
     <div id="div3" style="
                           max-height: 45%;
                           background:red;
                           overflow:auto;/*aussi ! :) */
                           ">
             //Content  fix                               
     </div>
</div>

et pour le flex :

Code:

1
2
3
4
5
6
7
8
9
10
11
html, body , #div1{
  height:100%;
  margin:0;
}
#div1{
  display:flex;
  flex-direction:column;
}
body > div > div {
  flex:1;
}

11/04/2014, 15h37
Reisors

OK merci bien je vais regarder sa