div avec min-hauteur dynamique basée sur la hauteur de la fenêtre du navigateur

Question

J'ai trois éléments div : un comme en-tête, un comme pied de page, et un contenu de centre div.
Le div au centre doit se développer automatiquement avec le contenu, mais je voudrais un min-height inférieur div atteigne toujours au moins le bas de la fenêtre, mais n'y est pas fixé sur les pages plus longues.

Par exemple :

<div id="a" style="height: 200px;">
  <p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
  <p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport, regardless of monitor resolution or window size.
</div>
<div id="c" style="height: 100px;">
  <p>This div needs to remain at the bottom of the page's content, and scroll with it on longer pages, but on shorter pages, needs to reach the bottom of the browser window, regardless of monitor resolution or window size.</p>
</div>

Answer 1

pour obtenir une hauteur dynamique basée sur la fenêtre du navigateur. Utiliser vh au lieu de %

par exemple : passez la hauteur suivante : 100vh ; à la div spécifique

Answer 2

Comme mentionné ailleurs, la fonction CSS calc() peut bien fonctionner ici. Il est maintenant principalement soutenu. Vous pourriez utiliser comme :

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 300px);
    min-height: -moz-calc(100% - 300px);
    min-height: calc(100% - 300px);
}