Wie macht man eine schwebende Div 100% Höhe von ihrem Elternteil?

256

Hier ist der HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

Und hier ist das CSS:

#inner {
  float: left;
  height: 100%;
}

Bei der Überprüfung mit den Chrome-Entwicklertools erhält der innere Teil eine Höhe von 0 Pixel.

Wie kann ich erzwingen, dass es 100% der Höhe des übergeordneten Divs beträgt?

Nathan Osman
quelle
1
Sie möchten also, dass der Text im äußeren Teil (nicht im inneren Teil), aber der schwebende innere Teil die Höhe des äußeren Bereichs ist?
Edl
Was ist das Endergebnis, das Sie erreichen möchten? Ich denke, meine Verwirrung liegt darin, dass wenn das innere Div so hoch ist wie das äußere und das äußere so hoch wie der Text, ist das nicht dasselbe wie wenn der Text im inneren Div ist?
Edl
2
@edl: Ja, das ist es :) Der Grund, warum ich es so will, ist, dass der innere Div ein Bild als Hintergrund hat. Der Text muss daneben stehen. Beide müssen sich innerhalb des äußeren Div befinden, da es auch ein Hintergrundbild hat.
Nathan Osman
3
Siehe auch stackoverflow.com/questions/1122381
Chadwick
2
Die Antworten auf diese Frage zu sehen und zu versuchen war nur deprimierend.
Ewige Stunde

Antworten:

125

Damit die #outerHöhe auf dem Inhalt basiert und die Höhe darauf basiert, müssen #innerbeide Elemente absolut positioniert sein.

Weitere Details finden Sie in der Spezifikation für die Eigenschaft css height , #innermüssen jedoch die #outerHöhe ignorieren, wenn #outerdie Höhe ist auto, es #outer sei denn, sie ist absolut positioniert. Dann ist die #innerHöhe 0, es sei denn #inner , sie ist absolut positioniert.

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

Wenn Sie jedoch #innerabsolut positionieren , wird eine floatEinstellung ignoriert. Sie müssen daher eine Breite für #innerexplizit auswählen und einen Auffüllpunkt hinzufügen #outer, um den von mir vermuteten Textumbruch zu fälschen. Im Folgenden ist die Polsterung von #outerbeispielsweise die Breite von #inner+3. Praktischerweise (da der springende Punkt darin bestand, die #innerHöhe auf 100% zu bringen) ist es nicht erforderlich, Text darunter zu wickeln #inner, sodass dies so aussieht, als würde #inneres schweben.

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

Ich habe meine vorherige Antwort gelöscht, da sie auf zu vielen falschen Annahmen über Ihr Ziel beruhte.

Chadwick
quelle
118
Hmm .. die Frage war über Floated Divs. Sie antworteten über absolut Position divs
Mihkel L.
57
Ich bin immer wieder überrascht, wie komplex es ist, wahnsinnig einfache Dinge in HTML/CSS:)
Yuriy Nakonechnyy
15
Wie kann man das ohne Hardcodierungsbreiten machen? Nicht gut für reaktionsschnelle Container.
Jake Wilson
23
Ich weiß nicht, warum dies so akzeptiert und positiv bewertet wurde. Die Frage bezieht sich auf schwebende Divs, was mich von meiner Suche hierher gebracht hat, und stattdessen beantwortet dies absolut positionierte Divs.
Matt K
2
Wie passt ein schwimmender Container vertikal zu seinem Container? Indem du es nicht mehr schweben lässt! Haha. Netter Versuch und nah genug, um tatsächlich als nützlich angesehen zu werden.
Rolf
124

Für die Eltern:

display: flex;

Sie sollten einige Präfixe hinzufügen http://css-tricks.com/using-flexbox/

Bearbeiten: Der einzige Nachteil ist IE wie gewohnt, IE9 unterstützt Flex nicht. http://caniuse.com/flexbox

Edit 2: Wie @toddsby erwähnt, align Artikel ist für Eltern und sein Standardwert ist tatsächlich strecken . Wenn Sie einen anderen Wert für das Kind wünschen, gibt es die Eigenschaft align-self.

Bearbeiten 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

Aiphee
quelle
3
Sie sollten darauf hinweisen, dass dies nur in modernen Browsern funktioniert und auch dann Herstellerpräfixe erfordert.
Kontur
12
Ich bin überrascht, dass diese Lösung nicht mehr Beachtung gefunden hat, da die ursprüngliche Frage erfordert, dass das untergeordnete Div schwebt und die gesamte Position: Absolute Lösungen werfen in den meisten Situationen, in denen Sie float verwenden würden, wirklich einen Schraubenschlüssel in die Arbeit. Diese Lösung bietet eine großartige Lösung, bei der die Nebenwirkungen der Position: Absolut kein Problem sind und wenn Sie bereit sind, ein wenig weiter zu graben, ist es möglich, eine ziemlich gute browserübergreifende Kompatibilität zu erzielen.
Luke
Dies ist die Antwort hier. IE9 wird früh genug rausgehen, könnte genauso gut helfen, indem es ihm einen guten, soliden Kick gibt. Diese Lösung ist so schön, einfach und leicht ... Ich bin fertig damit, alternative Lösungen zu hacken. ;)
jrista
2
Gemäß der neuesten Spezifikation für Flexbox: siehe w3.org/TR/css-flexbox-1/#align-items-property . align-items: stretch;ist nicht erforderlich, da dies der Standardwert ist. Es sollte auch für den Elternteil und nicht für das Kind definiert werden.
Toddsby
1
Geige als Antwort hinzugefügt. @ Tigran
Aiphee
77

Solange das übergeordnete Element positioniert ist, können Sie die Größe des untergeordneten Elements auf 100% einstellen. Für den Fall, dass Sie nicht möchten, dass der Elternteil absolut positioniert ist. Lassen Sie mich weiter erklären:

<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>
Nathaniel Schweinberg
quelle
14
Cool, dies ist weniger einschränkend als Chadwicks Anforderung position:absolute(die den Stil einer Site beeinträchtigen könnte)
Henry
3
Es könnte nur ich sein, aber ich habe Probleme, wenn die Seitenleiste größer als der Inhalt ist. Eine Hintergrundfarbe stoppt am übergeordneten Container, aber der Inhalt der Seitenleiste läuft außerhalb des übergeordneten Containers über.
Howdy_McGee
Dies ist eine viel flexiblere Lösung, und selbst wenn Sie mehrere schwebende untergeordnete Elemente haben, scheint es ein akzeptabler Nachteil zu sein, ihren Versatz absolut positioniert zu gestalten. +1
kontur
Vielen Dank sehr viel. Ich habe meine spezifische Lösung als Antwort auf eine andere Frage auf SO veröffentlicht: stackoverflow.com/a/31749164/84661 .
Brian Haak
24

Solange Sie keine Versionen von Internet Explorer vor IE8 unterstützen müssen, können Sie Folgendes verwenden display: table-cell:

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

Dadurch wird jedes Element mit der .innerKlasse gezwungen , die volle Höhe seines übergeordneten Elements einzunehmen.

Nathan Osman
quelle
Obwohl dies funktioniert, wird kein Rand angezeigt, selbst wenn Sie einen angeben. Diese Lösung schlägt also fehl, wenn Sie einen Rand zuweisen möchten. Sie können Polsterung als Umgehung zuweisen, aber wie würden Sie dies lösen, wenn Sie einen Rand benötigen (und keine Polsterung)?
Devner
13
Vermisse ich hier etwas? Ihre Frage verlangt, dass ein schwebendes Element eine Höhe von 100% hat. Wenn ein display: table-cell;Element schwebt, füllt es nicht mehr die Höhe seines Containers? Mir muss etwas fehlen, denn es ist deine eigene Frage ...?
user56reinstatemonica8
16

Ich habe ein Beispiel zur Lösung Ihres Problems gemacht.

Sie müssen einen Wrapper herstellen, ihn schweben lassen, dann Ihren Div absolut positionieren und ihm 100% Höhe geben.

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">&nbsp;</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;
}

Erläuterung: Die .right div ist absolut positioniert. Das bedeutet, dass seine Breite und Höhe sowie die oberen und linken Positionen basierend auf dem ersten übergeordneten Div berechnet werden, das NUR dann absolut oder relativ positioniert ist, wenn die Eigenschaften für Breite oder Höhe explizit in CSS deklariert sind. Wenn sie nicht explizit deklariert sind, werden diese Eigenschaften basierend auf dem übergeordneten Container (.right-wrapper) berechnet.

Daher wird die 100% -Höhe des DIV basierend auf der endgültigen Höhe des Containers berechnet, und die endgültige Position der rechten Position wird basierend auf dem übergeordneten Container berechnet.

Mandarinazul
quelle
1
Dies ist eine solide Lösung für Situationen, in denen Sie sicherstellen können , dass der .rightInhalt der .leftSpalte kürzer als der Inhalt der Spalte ist. Wenn Sie dies beispielsweise für eine Komponente verwenden, in der die .leftSpalte einen Inhalt unterschiedlicher Größe enthält und in der rechten Spalte lediglich ein Pfeil zu einer Detailseite angezeigt wird, funktioniert diese Lösung gut. +1 dafür
Zachary Kniebel
15

Hier ist es einfacher, dies zu erreichen:

  1. Stellen Sie die Containeranzeige (#outer) der drei Elemente ein: table
  2. Und setzen Sie die Elemente selbst (#inner) Anzeige: Tabellenzelle
  3. Entfernen Sie den Schwimmer.
  4. Erfolg.
#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Dank @Itay in Floated Div, 100% Höhe

Leopinzon
quelle
8

Wenn Sie bereit sind, ein wenig jQuery zu verwenden, ist die Antwort einfach!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

Dies funktioniert gut, um ein einzelnes Element auf eine Seite mit 100% Höhe des übergeordneten Elements zu verschieben, während andere schwebende Elemente, die normalerweise umlaufen würden, auf einer Seite gehalten werden.

Hoffe, das hilft anderen jQuery-Fans.

Obi-Dan
quelle
18
Es scheint übertrieben, Javascript auf dieses Layoutproblem zu werfen.
Kontur
1
Als jemand, der sich im IE entwickeln muss: DANKE!
Turm
1
Ein bisschen übertrieben vielleicht, aber das ist eine schöne Antwort, danke!
Martin
1
Ich bin damit einverstanden, dass alle Positionierungsprobleme ohne JS gelöst werden sollten.
Michaeluskov
1
Es ist übertrieben, JS AND jQuery
ViliusL
3

Dies ist ein Codebeispiel für ein Rastersystem mit gleicher Höhe.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Oben ist das CSS für äußere Div

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Oben ist das innere Div

Hoffe das hilft dir

Biswajit
quelle
1

Das hat mir geholfen.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

Ändern Sie rechts: und links:, um die bevorzugte #inner-Breite festzulegen.

Siebenschlüssel
quelle
1

Ein ähnlicher Fall, wenn Sie mehrere untergeordnete Elemente mit derselben Höhe benötigen, kann mit flexbox gelöst werden:

https://css-tricks.com/using-flexbox/

Set display: flex;für Eltern und flex: 1;für Kind - Elemente, sie alle die gleiche Höhe haben.

Romarom
quelle
-1

Versuchen

#outer{overflow: auto;}

Weitere Optionen finden Sie unter: Wie verhindern Sie, dass Eltern schwebender Elemente zusammenbrechen?

Rodrigo Barreiro
quelle
Die Option "Überlauf: versteckt" scheint besser zu funktionieren, da keine Chance zum Rollen besteht ...
Rodrigo Barreiro
Wenn Sie eine bessere Lösung gefunden haben, können Sie Ihre Antwort bearbeiten . Es wäre auch gut, wenn Sie Ihrer Antwort weitere Informationen hinzufügen würden, beispielsweise die im Link angegebenen Informationen.
Donald Duck