CSS: hauteur automatique sur contenant div, 100% hauteur sur fond div à l'intérieur contenant div
Le problème est que j'ai un div de contenu qui étire son conteneur en hauteur (le conteneur et le div de contenu ont une hauteur automatique).
Je veux que le conteneur d'arrière-plan, qui est un div frère du div de contenu, s'étire pour remplir le conteneur. Le conteneur d'arrière-plan contient des div pour diviser l'arrière-plan en morceaux.
Les divs d'arrière-plan et de conteneur ont une largeur de 100%, pas le conteneur de contenu.
HTML:
<div id="container">
<div id="content">
Some long content here ..
</div>
<div id="backgroundContainer">
<div id="someDivToShowABackground"/>
<div id="someDivToShowAnotherBackground"/>
</div>
</div>
CSS:
#container {
height:auto;
width:100%;
}
#content {
height: auto;
width:500px;
margin-left:auto;
margin-right:auto;
}
#backgroundContainer {
height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport.
}
En 2018, de nombreux navigateurs prennent en charge la Flexbox et Grid qui sont des modes d'affichage CSS très puissants qui éclipsent les méthodes classiques telles que les fausses colonnes ou les affichages tabulaires (qui sont traités plus loin dans cette réponse).
Pour l'implémenter avec la Grille, il suffit de spécifier display: grid et grille-modèle-colonnes sur le conteneur. Le grille-modèle-colonnes dépend du nombre de colonnes que vous avez, dans cet exemple j'utiliserai 3 colonnes , d'où la propriété ressemblera: grille-modèle-colonnes: auto auto auto, ce qui signifie essentiellement que chacun des les colonnes auront une largeur automatique.
Exemple de travail complet avec Grid:
html, body {
padding: 0;
margin: 0;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
padding: 20px;
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<!DOCTYPE html>
<html>
<head>
<title>Three Columns with Grid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
</div>
<div class="grid-item b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
</div>
<div class="grid-item c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
</div>
</div>
</body>
</html>Une autre façon serait d'utiliser le Flexbox en spécifiant display: flex on le conteneur des colonnes et en donnant aux colonnes une largeur appropriée. Dans l'exemple que j'utiliserai, qui est avec 3 colonnes, vous devez essentiellement diviser 100% en 3, donc c'est 33,3333% (assez près, peu importe 0,00003333 ... qui n'est pas visible de toute façon).
Exemple de travail complet utilisant Flexbox:
html, body {
padding: 0;
margin: 0;
}
.flex-container {
display: flex;
width: 100%;
}
.flex-column {
padding: 20px;
width: 33.3333%;
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<!DOCTYPE html>
<html>
<head>
<title>Three Columns with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="flex-column a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
</div>
<div class="flex-column b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
</div>
<div class="flex-column c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
</div>
</div>
</body>
</html>Le Flexbox et Grid sont pris en charge par tous les principaux navigateurs depuis 2017/2018, fait également confirmé par caniuse.com: Can J'utilise la grille , Puis-je utiliser flex .
Il existe également un certain nombre de solutions classiques, utilisées avant l'âge de Flexbox et Grid, comme OneTrueLayout Technique, Technique des fausses colonnes, CSS Technique d'affichage tabulaire et il y a aussi un Technique de superposition.
Je ne recommande pas d'utiliser ces méthodes car elles ont un caractère hackish et ne sont pas si élégantes à mon avis, mais il est bon de les connaître pour des raisons académiques.
Une solution pour les colonnes de même hauteur est la Technique d'affichage tabulaire CSS qui signifie utiliser le display: table fonctionnalité. Cela fonctionne pour Firefox 2 + , Safari 3 + , Opera 9 + et IE8 .
Le code pour l'affichage tabulaire CSS :
#container {
display: table;
background-color: #CCC;
margin: 0 auto;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
#col1 {
background-color: #0CC;
width: 200px;
}
#col2 {
background-color: #9F9;
width: 300px;
}
#col3 {
background-color: #699;
width: 200px;
}<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>Même s'il y a un problème avec l'expansion automatique de la largeur de la cellule de tableau, il peut être résolu facilement en insérant un autre div avec la cellule de tableau et en lui donnant une largeur fixe. Quoi qu'il en soit, la surexpansion de la largeur se produit dans le cas de l'utilisation de mots extrêmement longs (dont je doute que quiconque utilise un, disons, 600px long Word) ou la largeur de certains div qui est supérieure à la largeur de la cellule du tableau.
Faux Column Technique est la solution classique la plus populaire à ce problème, mais elle présente certains inconvénients tels que, vous devez redimensionner l'image en mosaïque d'arrière-plan si vous souhaitez redimensionner les colonnes et ce n'est pas non plus une solution élégante.
La Technique OneTrueLayout consiste à créer un fond de rembourrage d'une très grande hauteur et à le découper en amenant la position réelle de la bordure à la "position logique normale" en appliquant une valeur négative margin-bottom de la même valeur énorme et en masquant l'étendue créé par le remplissage avec débordement: caché appliqué à l'encapsuleur de contenu. Un exemple simplifié serait:
Exemple de travail:
.wraper {
overflow: hidden; /* This is important */
}
.floatLeft {
float: left;
}
.block {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30000px; /* This is important */
margin-bottom: -30000px; /* This is important */
width: 33.3333%;
box-sizing: border-box; /* This is so that the padding right and left does not affect the width */
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<html>
<head>
<title>OneTrueLayout</title>
</head>
<body>
<div class="wraper">
<div class="block floatLeft a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis.</p>
</div>
<div class="block floatLeft b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit. Praesent sed pellentesque lorem. Nam neque ante, egestas ut felis vel, faucibus tincidunt risus. Maecenas egestas diam massa, id rutrum metus lobortis non. Sed quis tellus sed nulla efficitur pharetra. Fusce semper sapien neque. Donec egestas dolor magna, ut efficitur purus porttitor at. Mauris cursus, leo ac porta consectetur, eros quam aliquet erat, condimentum luctus sapien tellus vel ante. Vivamus vestibulum id lacus vel tristique.</p>
</div>
<div class="block floatLeft c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit.</p>
</div>
</div>
</body>
</html>La technique de stratification doit être une solution très soignée qui implique un positionnement absolu des div avec un div wrapper positionné relatif principal. Il se compose essentiellement d'un certain nombre de divisions enfant et de la division principale. Le div principal a impérativement position: relative à sa collection d'attributs css. Les enfants de ce div sont tous impérativement position: absolu. Les enfants doivent avoir en haut et en bas réglé sur 0 et gauche-droite dimensions définies pour accueillir les colonnes les unes avec les autres. Par exemple, si nous avons deux colonnes, l'une de largeur 100px et l'autre de 200px , étant donné que nous voulons les 100px dans le côté gauche et les 200px dans le côté droit, la colonne de gauche doit avoir {left: 0; droite: 200px} et la colonne de droite {gauche: 100px; à droite: 0;}
À mon avis, la hauteur de 100% non implémentée dans un conteneur de hauteur automatisé est un inconvénient majeur et le W3C devrait envisager de réviser cet attribut (qui depuis 2018 est résoluble avec Flexbox et Grid).
Autres ressources: link1 , link2 , link , link4 , - link5 (important)
Faire #container à display:inline-block
#container {
height: auto;
width: 100%;
display: inline-block;
}
#content {
height: auto;
width: 500px;
margin-left: auto;
margin-right: auto;
}
#backgroundContainer {
height: 200px; /*200px is example, change to what you want*/
width: 100%;
}
Voir aussi: W3Schools
D'accord, donc quelqu'un va probablement me gifler pour cette réponse, mais j'utilise jQuery pour résoudre tous mes problèmes irritants et il se trouve que je viens d'utiliser quelque chose aujourd'hui pour résoudre un problème similaire. En supposant que vous utilisez jquery:
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
ce n'est pas testé, mais je pense que vous pouvez voir le concept ici. Fondamentalement, une fois chargé, vous pouvez obtenir la hauteur (externalHeight inclut le rembourrage + les bordures, innerHeight pour le contenu uniquement). J'espère que ça t'as aidé.
Voici comment le lier à l'événement de redimensionnement de la fenêtre:
$(window).resize(function() {
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
});
Quelque part, vous devrez définir une hauteur fixe, au lieu d'utiliser auto partout. Vous constaterez que si vous définissez une hauteur fixe sur votre contenu et/ou conteneur, l'utilisation de l'auto pour les choses à l'intérieur fonctionnera.
De plus, vos boîtes se développeront toujours en hauteur avec plus de contenu, même si vous en avez défini une hauteur - alors ne vous inquiétez pas :)
#container {
height:500px;
min-height:500px;
}
Juste un petit mot car j'ai eu du mal avec ça.
En utilisant #container {overflow: hidden; } la page que j'avais commencé à avoir des problèmes de mise en page dans Firefox et IE (quand le zoom allait et venait, le contenu rebondissait dans le div parent).
La solution à ce problème consiste à ajouter un affichage: inline-block; à la même div avec débordement: caché;
Vous ne devriez pas avoir à définir height: 100% à tout moment si vous souhaitez que votre conteneur remplisse la page. Il y a de fortes chances que votre problème soit enraciné dans le fait que vous n'ayez pas nettoyé les flotteurs des enfants du conteneur. Il existe plusieurs façons de résoudre ce problème, en ajoutant principalement overflow: hidden au conteneur.
#container { overflow: hidden; }
Cela devrait être suffisant pour résoudre le problème de hauteur que vous rencontrez.
J'ai fini par faire 2 affichages: table;
#container-tv { /* Tiled background */
display:table;
width:100%;
background-image: url(images/back.jpg);
background-repeat: repeat;
}
#container-body-background { /* center column but not 100% width */
display:table;
margin:0 auto;
background-image:url(images/middle-back.png);
background-repeat: repeat-y;
}
Cela lui a donné une image d'arrière-plan en mosaïque avec une image d'arrière-plan au milieu sous forme de colonne. Il s'étend jusqu'à 100% de la hauteur de la page et pas seulement 100% de la taille de la fenêtre du navigateur
{
height:100vh;
width:100vw;
}
Essayez d'exclure la hauteur de l'élément de style.
c'est-à-dire ni donner la hauteur: 100% ni à aucune autre valeur.