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

[Se référant au code Less de Dmity dans une autre réponse] Je suppose qu'il s'agit d'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/

J'espère que cela vous aidera :)

Answer 2

Il y a une certaine contradiction entre le titre de la question et son contenu. Le titre parle d'une division parent, mais la question donne l'impression que vous voulez que deux divisions sœurs (navigation et contenu) aient la même hauteur.

Voulez-vous (a) que la navigation et le contenu soient à 100% de la hauteur de la page principale, ou (b) que la navigation et le contenu soient de la même hauteur ?

Je suppose (b)... si c'est le cas, je ne pense pas que vous puissiez le faire étant donné la structure actuelle de votre page (du moins, pas avec du pur CSS et sans script). Vous auriez probablement besoin de faire quelque chose comme :

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

et définissez la division de contenu pour qu'elle ait une marge gauche correspondant à la largeur du volet de navigation. De cette façon, le contenu du volet de contenu se trouve à droite de la navigation et vous pouvez définir la division de navigation pour qu'elle soit à 100 % de la hauteur du contenu.

EDIT : Je fais tout ça dans ma tête, mais il faudrait probablement aussi définir la marge gauche de la division de navigation à une valeur négative ou définir sa gauche absolue à 0 pour la repousser à l'extrême gauche. Le problème, c'est qu'il y a plusieurs façons de faire ça, mais toutes ne sont pas compatibles avec tous les navigateurs.

Answer 3

J'ai eu le même problème,

Je sais que tout le monde déteste les tableaux, mais pour moi c'était la solution qui fonctionnait le mieux dans la compatibilité des navigateurs.

<table id="main">
  <tr>
    <td id="navigation"></td>
    <td id="content"></td>
  </tr>
</table>

Je n'ai même pas changé de CSS ou de code supplémentaire, cela a fonctionné tel quel.

Answer 4

La façon la plus simple de le faire est de faire semblant. A List Apart en a beaucoup parlé au fil des ans, comme dans cet article de Dan Cederholm de 2004 .

Voici comment je procède habituellement :

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

Vous pouvez facilement ajouter un en-tête à cette conception en enveloppant #container dans un autre div, en intégrant le div d'en-tête comme frère de #container et en déplaçant les styles de marge et de largeur vers le conteneur parent. En outre, le CSS doit être déplacé dans un fichier distinct et non pas conservé en ligne, etc. etc. Enfin, la classe clearfix peut être trouvée sur tout est dans la position .