<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>
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.