Sto provando a fare in modo che un contenitore riempia l'intera pagina (o il viewport, a seconda di quale è più grande), ma ha incontrato qualche problema. Sto usando i consigli da questo post: https://stackoverflow.com/a/17555766, per impostare il <html> e il <body> all'altezza del 100%.Perché l'altezza dei contenitori non è ereditata quando è ridimensionata con altezza minima?
Ma ho notato che le .Content div riempie solo la finestra quando l'altezza <body> è impostato con height: 100%, ma non con min-height: 100%. Perché? Perché lo .Content non assume l'altezza dello <body> quando è impostato con min-height? C'è una soluzione per questo (senza posizionamento assoluto o altezze fisse)?
html
<html>
<body>
<div class="Content">Content</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
/* does not work for .Content: */
min-height: 100%;
/* does work for .Content: */
/* height: 100%; */
background: blue;
}
.Content {
background: red;
min-height: 100%;
}
codepen: http://codepen.io/anon/pen/mJEMVX
P.S .: quando l'altezza <body> è impostato con height: 100%, sia il lavoro min-height: 100% e height: 100% come previsto per .Content.
Immagino che il motivo sottostante sia la dipendenza circolare tra l'altezza del corpo e l'altezza del contenuto. Immagina che ci sia un altro elemento dopo il '.content'. Ora, se il contenuto si espande al 100%, anche il corpo deve espandersi, il che farebbe espandere ulteriormente il contenuto. Probabilmente il motivo per cui la specifica definisce una percentuale di altezza come quella che fa è rompere questa dipendenza circolare. –
@Alexey Lebedev: È corretto. – BoltClock