J'ai un site avec la structure suivante :
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
La navigation est à gauche et la division de contenu est à droite. Les informations de la division de contenu sont extraites par PHP, et sont donc différentes à chaque fois.
Comment puis-je mettre la navigation à l'échelle verticalement pour que sa hauteur soit la même que celle de la division de contenu, quelle que soit la page chargée ?
NOTE : Cette réponse s'applique aux anciens navigateurs qui ne prennent pas en charge la norme Flexbox. Pour une approche moderne, voir : https://stackoverflow.com/a/23300532/1155721
Je vous suggère de jeter un coup d'œil à [Colonnes de hauteur égale avec CSS multi-navigateurs et sans bidouillages][1].
En fait, il n'est pas facile de faire cela avec les CSS d'une manière compatible avec les navigateurs (mais c'est déjà le cas avec les tableaux), alors trouvez une solution prépackagée appropriée.
En outre, la réponse varie selon que vous souhaitez une hauteur de 100 % ou une hauteur égale. En général, la hauteur est égale. Si la hauteur est de 100 %, la réponse est légèrement différente.
[1] : http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Si vous ne voyez pas d'inconvénient à ce que la division de navigation soit coupée en cas de division de contenu trop courte, il existe au moins une solution simple :
#main {
position: relative;
}
#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}
#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}
Sinon, il y a la technique des <a href="http://www.alistapart.com/articles/fauxcolumns/" ; title="Lien vers l'article de A List Apart'sur le concept des 'fausses-colonnes.'">fausses-colonnes.
[Se référant au code Less de Dmity dans une autre réponse] Je suppose que c'est une sorte de "pseudo-code" ?
D'après ce que j'ai compris, essayez d'utiliser la technique des fausses colonnes qui devrait faire l'affaire.
[http://www.alistapart.com/articles/fauxcolumns/] [1]
J'espère que cela vous aidera :)