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

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

Answer 2

En utilisant jQuery :

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

Answer 3

height : <percent> ne fonctionnera que si vous avez tous les nœuds parents avec une hauteur en pourcentage spécifiée avec une hauteur fixe en pixels, ems, etc. au niveau supérieur. De cette façon, la hauteur se répercutera en cascade sur votre élément.

Vous pouvez spécifier 100% aux éléments html et body comme @Travis l'a indiqué plus tôt pour que la hauteur de la page descende en cascade vers vos nœuds.

Answer 4

Essayez de faire en sorte que la marge inférieure soit de 100 %.

margin-bottom: 100%;

Answer 5

Sur la base de la méthode décrite dans ce article J'ai créé une solution dynamique .Less :

Html :

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

Moins :

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}