Comment forcer la division de l'enfant à 100% de la division du parent sans spécifier la hauteur du parent ?

Question

Je suppose que c'est possible, mais je n'arrive pas à comprendre

J'ai un site dont la structure de base est la suivante.

<div id="header"></div>

<div id="main">
    <div id="navigation"></div>
    <div id="content"></div>
</div>

<div id="footer"></div>

La navigation est une navigation à gauche avec une division de contenu à droite de celle-ci. Je voudrais mettre la navigation à l'échelle verticalement pour qu'elle ait la même hauteur que la section de contenu en fonction de ce qui est chargé dans la section de contenu. Les informations de la section de contenu sont extraites par PHP, elles sont donc différentes à chaque fois. Existe-t-il un moyen de faire en sorte que la navigation soit toujours de la même hauteur que la section de contenu, quelle que soit la page chargée ?

Answer 1

Pour le parent :

display: flex;

Pour les enfants :

align-items: stretch;

Vous devriez ajouter des préfixes, http://css-tricks.com/using-flexbox/ .

Answer 2

Je vous suggère de jeter un coup d'oeil à Colonnes de même hauteur avec des feuilles de style en cascade et sans bidouillages .

Fondamentalement, il n'est pas facile de faire cela avec les CSS d'une manière compatible avec les navigateurs (mais il est facile de le faire avec les tableaux), alors trouvez une solution appropriée pré-packagée.

En outre, la réponse varie selon que vous souhaitez une hauteur de 100 % ou une hauteur égale. En général, c'est une hauteur égale. Si la hauteur est de 100 %, la réponse est légèrement différente.

Answer 3

Il s'agit d'un problème frustrant auquel les concepteurs sont confrontés en permanence. Le truc, c'est que vous devez définir la hauteur à 100% sur BODY et HTML dans votre CSS.

html,body {
    height:100%;
}

Ce code apparemment inutile sert à définir au navigateur ce que signifie 100%. Frustrant, oui, mais c'est le moyen le plus simple.

Answer 4

Je trouve que le fait de définir les deux colonnes en display:table-cell au lieu de float:left fonctionne bien.

Answer 5

Si vous ne voyez pas d'inconvénient à ce que la division de navigation soit coupée dans le cas d'une division de contenu plus courte que prévu, 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 */
}

Ailleurs, il y a le fausses-colonnes technique.