Question Comment forcer la division enfant à 100% de la division parent sans spécifier la taille du parent?


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 sur la gauche et la div de contenu est sur la droite. L'information pour le contenu div est récupérée via PHP, donc c'est différent à chaque fois.

Comment mettre à l'échelle la navigation verticalement pour que sa hauteur soit la même que la hauteur de la div de contenu, quelle que soit la page chargée?


425
2017-07-13 22:14


origine


Réponses:


REMARQUE: Cette réponse est applicable aux navigateurs existants sans prise en charge de la norme Flexbox. Pour une approche moderne, voir: https://stackoverflow.com/a/23300532/1155721


Je vous suggère de jeter un oeil à Colonnes à hauteur égale avec CSS croisé et sans hachage.

Fondamentalement, le faire avec CSS dans un navigateur compatible n'est pas trivial (mais trivial avec des tableaux) alors trouvez-vous une solution pré-packagée appropriée.

En outre, la réponse varie selon que vous voulez 100% de hauteur ou de hauteur égale. Habituellement c'est la même taille. Si c'est 100% de hauteur, la réponse est légèrement différente.


136
2017-07-13 22:21



Pour le parent:

display: flex;

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

Modifier: Comme l'a noté @Adam Garner, align-items: stretch; n'est pas nécessaire. Son utilisation est également pour les parents, pas les enfants. Si vous voulez définir des étirements d'enfants, vous utilisez align-self.

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

.child {  
  width: 100px;
  background: blue;
}
<div class="parent">
  <div class="child"></div>
</div>


443
2018-04-25 18:33



C'est un problème frustrant qui touche les concepteurs tout le temps. L'astuce est que vous devez définir la hauteur à 100% sur BODY et HTML dans votre CSS.

html,body {
    height:100%;
}

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


94
2017-07-13 22:22



Je trouve que mettre les deux colonnes à display: table-cell; au lieu de float: left; fonctionne bien.


91
2018-05-05 21:59



Si cela ne vous dérange pas que la div de navigation soit coupée en cas de contenu div inattendu, il existe au moins un moyen 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 faux-colonnes technique.


52
2017-07-13 22:22



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

28
2017-08-06 15:23



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

15
2017-07-12 02:54



Essayez de faire la marge inférieure à 100%.

margin-bottom: 100%;

10
2017-12-29 15:59