Pour ceux qui viennent ici pour une réponse plus facile à comprendre et qui inclut même des échantillons de code, cette réponse (copiée de aquí ) est pour vous.
Non JavaScript ou des valeurs de pixel définies (telles que 100px ) sont nécessaires, juste, pure CSS et pourcentages.
Si votre div est juste assis là tout seul, height: 50% signifiera 50% de la hauteur du corps. Normalement, la hauteur du corps est de zéro sans contenu visible, donc 50% de cette hauteur est juste, eh bien, zéro.
Voici la solution (basée sur este ) (décommentez l'élément background lignes pour obtenir une visualisation du rembourrage) :
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html
{
height: 100%;
/* background: green; */
}
body
{
/*
100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
This prevents an unnecessary vertical scrollbar from appearing.
*/
height: calc(100% - 1em);
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
Ce qui précède a été écrit pour qu'il y ait toujours le rembourrage habituel. Vous pouvez définir les dimensions de la zone rouge div a 100% et je vois encore du rembourrage sur chaque côté/extrémité. Si vous ne voulez pas ce rembourrage, utilisez ceci (bien que cela ne soit pas joli, je vous recommande de vous en tenir au premier exemple) :
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html, body
{
height: 100%;
}
/* You can uncomment it but you wouldn't be able to see it anyway. */
/*
html
{
background: green;
}
*/
body
{
margin: 0;
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
