La question du dimensionnement vertical des DIV revient tout le temps, et bien que j'ai trouvé en de multiples endroits cette question résolues, j'ai encore un petit problème lorsqu'il s'agit de dimensionner plusieurs DIV les uns dans les autres.
Le HTML est on ne peut plus simple:
Le CSS n'est pas trop compliqué et dans l'ensemble, il fait ce que je veux, sauf...
Pour plus de clarté, voici la page en ligne.
Ce qui me pose problème c'est lorsque je veux définir la hauteur de main (visible en pointillés rouges) avec height ou min-height:
Pourtant, ce que j'ai appris en divers endroits, c'est que pour pouvoir définir la hauteur d'un DIV en pourcentage, il suffit que celles de tous ses parents soit définies aussi. C'est ainsi que la hauteur du div est parfaitement réglée (visible en fond gris hachuré). Mais avec main, ça ne marche plus.
Mon but et pourtant de définir la hauteur de main pour pouvoir définir ensuite celle de div#content (visible avec le fond blanc et la grosse bordure grise).
J'aimerais que la bordure grise soit poussée jusqu'au footer tant que le contenu est plus petit que la fenêtre.
Quelqu'un sait-il faire ça ?
Le HTML est on ne peut plus simple:
<body>
<header>
header<br>
whatever his height
</header>
<main>
<div id="content">
content_START
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
content_END
</div>
</main>
<footer>
footer
</footer>
</body>Le CSS n'est pas trop compliqué et dans l'ensemble, il fait ce que je veux, sauf...
/* -- STRUCTURE -- */
*{
margin: 0;
padding: 0;
border: none;
}
html{
height: 100%;
}
body{
position: relative;
min-height: 100%;
}
main{
x display: block;
x width: 100%;
o height: 100%;
min-height: 100%;
padding-bottom: 22px; /* = footer.height */
}
footer{
position: absolute;
bottom: 0px;
height: 22px; /* = main.padding-bottom */
width: 100%;
}
/* -- DECORATION -- */
body{
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAkSURBVBhXY/iFBJ49e4bgAzlAEsqHcIAAxIdzgIABmfPr1y8AQ8VIE1HMs9QAAAAASUVORK5CYII=') repeat;
font-family: arial;
font-size: 14px;
}
header{
border-top:solid 1px #939AA3;
}
main{
outline: dotted 1px red;
outline-offset: -1px;
}
footer{
border-top:solid 1px #939AA3; /* gris bordure */
}
/* -- ELEMENTS -- */
div#content{
background-color: white;
border: 8px solid #E7EBEF;
margin: 4px;
padding: 4px;
border-radius: 8px;
Pour plus de clarté, voici la page en ligne.
Ce qui me pose problème c'est lorsque je veux définir la hauteur de main (visible en pointillés rouges) avec height ou min-height:
main{
height: 100%;
}
Pourtant, ce que j'ai appris en divers endroits, c'est que pour pouvoir définir la hauteur d'un DIV en pourcentage, il suffit que celles de tous ses parents soit définies aussi. C'est ainsi que la hauteur du div est parfaitement réglée (visible en fond gris hachuré). Mais avec main, ça ne marche plus.
Mon but et pourtant de définir la hauteur de main pour pouvoir définir ensuite celle de div#content (visible avec le fond blanc et la grosse bordure grise).
J'aimerais que la bordure grise soit poussée jusqu'au footer tant que le contenu est plus petit que la fenêtre.
Quelqu'un sait-il faire ça ?