Comment faire pour que le div occupe la hauteur restante ?

Question

J'ai ce problème, j'ai deux divs :

<div style="width:100%; height:50px;" id="div1"></div>
<div style="width:100%;" id="div2"></div>

Comment faire pour que la div2 occupe la hauteur restante de la page ?

Answer 1

Utilisez le positionnement absolu :

#div1{
    width: 100%;
    height: 50px;
    background-color:red;/*Development Only*/
}
#div2{
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color:blue;/*Development Only*/
}

<div id="div1"></div>
<div id="div2"></div>

Answer 2

Vous pouvez utiliser ce http://jsfiddle.net/Victornpb/S8g4E/783/

#container {
    display: table;
    width: 400px;
    height: 400px;
}
#container > div{
    display: table-row;
    height: 0;
}
#container > div.fill{
    height: auto;
}

Il suffit d'appliquer la classe .fill à l'un des enfants pour qu'il occupe la hauteur restante.

<div id="container">
    <div>
        Lorem ipsum
    </div>
    <div>
        Lorem ipsum
    </div>
    <div class="fill">   <!-- this will fill the remaining height-->
        Lorem ipsum
    </div>
</div>

Il fonctionne avec le nombre d'enfants que vous souhaitez, sans qu'aucun balisage supplémentaire ne soit nécessaire.

Answer 3

Démo

Une façon de procéder est de définir le div à position:absolute et lui donner un haut de 50px et un bas de 0px ;

#div2
{
    position:absolute;
    bottom:0px;
    top:50px
}

Answer 4

Puisque vous savez combien de pixels sont occupés par le contenu précédent, vous pouvez utiliser la fonction calc() fonction :

height: calc(100% - 50px);

Answer 5

J'ai moi-même été confronté au même problème et j'ai trouvé ces 2 réponses en utilisant les éléments suivants flex propriétés.

CSS

.container {
  display: flex;
  flex-direction: column;
}

.dynamic-element{
  flex: 1;
}

• https://stackoverflow.com/a/35348188/1084619
• https://stackoverflow.com/a/35348188/1084619