Comment forcer le Div de L'enfant à 100% du Div du Parent sans spécifier la taille du Parent?

pour le parent:

display: flex;

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

Edit: Comme @Adam Garner l'a noté, align-items: stretch; n'est pas nécessaire. Son utilisation est aussi pour les parents, pas les enfants. Si vous souhaitez définir des enfants d'étirement, vous utilisez alignez-auto.

.parent {
  height: 150px;
  background: red;
  padding: 10px;
  display:flex;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="child"></div>
</div>

c'est une question frustrante qui est traitée avec les designers tout le temps. L'astuce est que vous devez définir la hauteur à 100% Sur le corps et HTML dans votre CSS.

html,body {
    height:100%;
}

ce code apparemment inutile est de définir pour le navigateur ce que signifie 100%. Frustrant, oui, mais c'est la façon la plus simple.

je trouve que le réglage des deux colonnes à display: table-cell; au lieu de float: left; fonctionne bien.

si cela ne vous dérange pas que la div de navigation soit coupée dans le cas d'une div de contenu inopinément court, il y a au moins un moyen facile:

#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 la technique faux-colonnes .

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

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();
});

essayez de faire la marge inférieure 100%.

margin-bottom: 100%;

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

regardez cet exemple .

height : <percent> ne fonctionnera que si vous avez tous les noeuds parents avec un pourcentage de hauteur spécifié avec une hauteur fixe en pixels, ems, etc. sur le niveau supérieur. De cette façon, la hauteur descendra en cascade jusqu'à votre élément.

vous pouvez spécifier 100% à des éléments html et de corps comme @Travis a déclaré plus tôt pour avoir la hauteur de page en cascade vers le bas de vos noeuds.

basé sur la méthode décrite dans ce article j'ai créé .Solution moins dynamique:

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;
            }
        }
    }
}

après de longues recherches et des essais, rien n'a résolu mon problème sauf

style = "height:100%;"

sur les enfants div

et pour parent appliquer ce

.parent {
    display: flex;
    flex-direction: column;
}

aussi, j'utilise bootstrap et cela n'a pas corrompu le responsive pour moi.

je sais que cela fait longtemps que la question a été posée, mais j'ai trouvé une solution facile et j'ai pensé que quelqu'un pourrait l'utiliser (désolé pour le pauvre anglais).

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

exemple Simple. Notez que vous pouvez transformer en réactivité.

dans un projet RWD, le mieux serait d'utiliser jQuery. Pour un petit écran, vous voudrez probablement garder la hauteur automatique car les col1, col2 et col3 sont empilés les uns sur les autres.

cependant, après un breakpoint de requête de média, vous souhaitez que les colonnes apparaissent l'une à côté de l'autre avec une hauteur égale pour toutes les colonnes.

1125 px est seulement un exemple de point de rupture de largeur de fenêtre après lequel vous voudriez faire toutes les colonnes réglées à la même hauteur.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

vous pouvez, bien sûr, définir plus de points d'arrêt si vous en avez besoin.

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            if (window.innerWidth>= 1125) {
              $('.col1').height($('.wraper').height());
              $('.col2').height($('.wraper').height());
              $('.col3').height($('.wraper').height());
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

il y a une certaine contradiction dans le titre et le contenu de la question. Le titre parle d'une div mère, mais la question donne l'impression que vous voulez que deux divs (navigation et contenu) soient de la même taille.

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

je suppose (b)...si c'est le cas, je ne pense pas que vous serez en mesure de le faire étant donné votre structure de page actuelle (au moins, pas avec CSS pur et pas de scripting). Vous auriez probablement besoin de faire quelque chose comme:

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

et définir le contenu div pour avoir une marge à gauche de quelque soit la largeur du volet de navigation. De cette façon, le contenu du contenu est à la droite de la navigation et vous pouvez définir la div de navigation à 100% de la hauteur du contenu.

EDIT: je le fais complètement dans ma tête, mais vous le feriez probablement il faut aussi régler la marge gauche de la div de navigation à une valeur négative ou régler sa gauche absolue à 0 pour la ramener à l'extrême gauche. Le problème est, il ya de nombreuses façons de tirer cela, mais pas tous d'entre eux vont être compatibles avec tous les navigateurs.

[se référant au moins de code de Dmity dans une autre réponse] je devine 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 /

Espérons que cela aide :)

ma solution:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

vous utilisez CSS Flexbox

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

comme montré plus haut, flexbox est le plus facile. par exemple.

#main{ display: flex; align-items:center;}

cela alignera tous les éléments enfants au centre de l'élément parent.

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

de:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

les états bootstrap, mais vous n'avez pas besoin de bootstrap pour l'utiliser. Répondre à cette vieille question, car cela a fonctionné pour moi, et semble assez facile à mettre en œuvre.

C'est la même réponse que j'ai donnée à cette Question

cette astuce fonctionne: Ajouter un élément final dans votre section de HTML avec un style clair: les deux;

    <div style="clear:both;"></div>

Tout ce qui précède sera inclus dans la hauteur.

ajouter display: grid au parent

la façon la plus facile de faire cela est de faire semblant. Une liste à part a largement couvert cette au fil des ans, comme dans cet article de Dan Cederholm de 2004 .

Voici comment je le fais 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 sur cette conception en enveloppant #container dans une autre div, en incorporant la div d'en-tête en tant que frère de #container, et en déplaçant les styles de marge et de largeur vers le conteneur parent. Également, les feuilles de style en cascade devraient être placées dans un fichier distinct et ne pas être conservées en ligne, etc. etc. Enfin, la classe clearfix se trouve sur positioniseverything .