Comment faire une div floated 100% Hauteur de son parent?
voici le HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
Et voici la CSS:
#inner {
float: left;
height: 100%;
}
après inspection avec les outils de développement Chrome, la div interne obtient une hauteur de 0px.
Comment puis-je forcer à être 100% de la hauteur de la div mère?
11 réponses
pour #outer
hauteur à être basée sur son contenu, et avoir #inner
base sa hauteur sur cela, faire les deux éléments absolument positionné.
plus de détails peuvent être trouvés dans la spécification pour la CSS hauteur propriété , mais essentiellement, #inner
doit ignorer #outer
hauteur si" 151920920 'S hauteur est auto
, à moins que #outer
est positionné absolument. Alors #inner
hauteur sera be 0, sauf si #inner
lui-même est positionné absolument.
<style>
#outer {
position:absolute;
height:auto; width:200px;
border: 1px solid red;
}
#inner {
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
However... En positionnant #inner
absolument, un réglage float
sera ignoré, donc vous aurez besoin de choisir une largeur pour #inner
explicitement, et d'ajouter du rembourrage dans #outer
pour simuler l'emballage du texte que je soupçonne que vous voulez. Par exemple, ci-dessous, le rembourrage de #outer
est la largeur de #inner
+3. Idéalement (comme le but était d'obtenir #inner
hauteur à 100%) il n'y a pas besoin d'envelopper le texte sous #inner
, donc cela ressemblera à #inner
est flotté.
<style>
#outer2{
padding-left: 23px;
position:absolute;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2{
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer2'>
<div id='inner2'>
</div>
text
</div>
j'ai supprimé ma réponse précédente, car elle était basée sur trop de fausses hypothèses au sujet de votre objectif.
pour le parent:
display: flex;
vous devez ajouter des préfixes http://css-tricks.com/using-flexbox /
Edit: Seul inconvénient est IE comme d'habitude, IE9 ne supporte pas flex. http://caniuse.com/flexbox
Edit 2: Comme @toddsby l'a noté, align items est pour parent, et sa valeur par défaut est en fait stretch . Si vous voulez une valeur différente pour enfant, il est d'aligner-auto de la propriété.
en fait, tant que l'élément parent est positionné, vous pouvez régler la taille de l'enfant à 100%. À savoir, au cas où vous ne voulez pas que le parent soit absolument positionné. Permettez-moi d'expliquer plus loin:
<style>
#outer2 {
padding-left: 23px;
position: relative;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2 {
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id='outer2'>
<div id='inner2'>
</div>
</div>
aussi longtemps que vous n'avez pas besoin de supporter des versions D'Internet Explorer plus tôt que IE8, vous pouvez utiliser display: table-cell
pour accomplir ceci:
HTML:
<div class="outer">
<div class="inner">
<p>Menu or Whatever</p>
</div>
<div class="inner">
<p>Page contents...</p>
</div>
</div>
CSS:
.inner {
display: table-cell;
}
cela forcera chaque élément de la classe .inner
à occuper toute la hauteur de son élément parent.
j'ai fait un exemple résoudre votre problème.
vous devez faire un papier d'emballage, le faire flotter, puis positionner absolute votre div et lui donner 100% de hauteur.
HTML
<div class="container">
<div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
<div class="right-wrapper">
<div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
</div>
<div class="clear"> </div>
</div>
CSS:
.container {
width: 100%;
position:relative;
}
.left {
width: 50%;
background-color: rgba(0, 0, 255, 0.6);
float: left;
}
.right-wrapper {
width: 48%;
float: left;
}
.right {
height: 100%;
position: absolute;
}
Explication: The .la div droite est absolument positionnée. Cela signifie que sa largeur et de la hauteur, et en haut et à gauche positiones sera calculed basé sur la première div parent absolue ou relative positionné que si la largeur ou la hauteur propriétés sont déclarées explicitement dans CSS; si elles ne sont pas explicty déclaré, ces propriétés seront calculed basé sur le conteneur parent (.droit-wrapper).
ainsi, la hauteur de 100% de la DIV sera calculée sur la base .la hauteur finale du conteneur, et la position finale de .la bonne position sera calculée en fonction du conteneur parent.
ici, il est un moyen plus simple d'atteindre que:
- régler le contenant des trois éléments (#Extérieur) affichage: table
- et régler les éléments eux-mêmes (#inner) display: table-cell
- enlever le flottant.
- succès.
#outer{
display: table;
}
#inner {
display: table-cell;
float: none;
}
merci à @Itay dans floated div, 100% Hauteur
si vous êtes prêt à utiliser un peu de jQuery, la réponse est simple!
$(function() {
$('.parent').find('.child').css('height', $('.parent').innerHeight());
});
cela fonctionne bien pour flotter un élément simple sur un côté avec une hauteur de 100% de son parent tandis que d'autres éléments flottants qui normalement s'enrouler autour sont maintenus à un côté.
J'espère que cela aidera les fans de jQuery.
il s'agit d'un échantillon de code pour système de grille de hauteur égale.
#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}
ci-dessus est le CSS pour la division extérieure
#inner{
width: 20%;
float: left;
border: 1px solid;
}
ci-dessus est la div interne
Espère que cela vous aider à
Cela m'a aidé.
#outer {
position:relative;
}
#inner {
position:absolute;
top:0;
left:0px;
right:0px;
height:100%;
}
modifier à droite: et à gauche: pour définir préférable #largeur intérieure.
un cas similaire lorsque vous avez besoin de plusieurs éléments enfant ont la même taille peut être résolu avec flexbox:
https://css-tricks.com/using-flexbox /
ensemble display: flex;
pour parent et flex: 1;
pour éléments enfants, ils auront tous la même taille.
essayer
#outer{overflow: auto;}
Afficher plus d'options en: comment empêcher les parents d'éléments flottants de s'effondrer?