Comment forcer une div à utiliser l'espace restant HTML/CSS

Programmation HTML/CSS
, , , , ,
1

Je travaille sur une application Web dont le contenu doit occuper toute la hauteur de l’écran.

J’ai une div pour le header et une div pour le contenu. Pour le moment, j’utilise un tableau HTML pour la mise en page, comme ci-dessous :

<table id="myTable">
    <tr>
        <td id="myHeader">
            <div id="header">Lorem Ipsum</div>
        </td>
    </tr>
    <tr>
        <td id="myContent">
            <div id="content">Lorem Ipsum</div>
        </td>
    </tr>
</table>
2

Une solution simple, qui utilise le système Flexbox :

Code HTML

<div class="header">Header</div>
<div class="content">Content</div>

Code CSS

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.header {
  background-color: yellow;
}
.content {
  background: lightgreen; 
  flex-grow: 1;
}

Vous pouvez voir le résultat ci-dessous en cliquant sur « Run Pen »

3

Vous pouvez aussi utiliser vh qui signifie view height en CSS.

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: green;
}

<div class="full-height">Lorem Ipsum</div>
4

Dans l’exemple suivant, j’ai ajouté le header et le footer pour montrer comment ajouter une région à hauteur fixe, puis définir la zone de contenu pour remplir l’espace restant.

Code HTML

<div class="box">
  <div class="row header"><p>Header (hauteur fixe)</p></div>
  <div class="row content">
    <p>
      Content (forcer ce div à utiliser l’espace restant)
    </p>
  </div>
  <div class="row footer"><p>Footer (hauteur fixe)</p></div>
</div>

Code CSS

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 35px;
  background:lightpink;
}

.box .row.content {
  flex: 1 1 auto;
  background:lightblue;
}

.box .row.footer {
  flex: 0 1 35px;
  background:lightpink;
}