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

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?

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.

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/

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>

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.

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.

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

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.

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

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.

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.

Versuchen

#outer{overflow: auto;}

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