Discussion :

[Reisors]

Bonjour,

A l'heure actuel ma page est comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[NoSmoking]

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

[CCyrillus]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[Reisors]

OK merci bien je vais regarder sa