Kind innerhalb des Elternteils mit Mindestgröße: 100% erbt keine Größe

Ich habe einen Weg gefunden, einen Div-Container so zu gestalten, dass er mindestens die volle Höhe einer Seite einnimmt, indem ich ihn einstelle min-height: 100%;. Wenn ich jedoch ein verschachteltes div hinzufüge und setze height: 100%;, wird es nicht auf die Höhe des Containers gedehnt. Gibt es eine Möglichkeit, das Problem zu beheben?

html, body {
  height: 100%;
  margin: 0;
}

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

Dies ist ein gemeldeter Webkit-Fehler (Chrome / Safari). Kinder von Eltern mit Mindestgröße können die Eigenschaft height nicht erben: https://bugs.webkit.org/show_bug.cgi?id=26559

Anscheinend ist auch Firefox betroffen (kann derzeit nicht im IE getestet werden)

Mögliche Problemumgehung:

• Position hinzufügen: relativ zu #containment
• Position hinzufügen: absolut zu # Containment-Shadow-Left

Der Fehler wird nicht angezeigt, wenn das innere Element absolut positioniert ist.

Siehe http://jsfiddle.net/xrebB/

Bearbeiten am 10. April 2014

Da ich derzeit an einem Projekt arbeite, für das ich wirklich übergeordnete Container min-heightund untergeordnete Elemente benötige , die die Höhe des Containers erben, habe ich weitere Nachforschungen angestellt.

Erstens: Ich bin mir nicht mehr so ​​sicher, ob das aktuelle Browserverhalten wirklich ein Fehler ist. CSS2.1-Spezifikationen sagen:

Der Prozentsatz wird in Bezug auf die Höhe des Blocks der generierten Box berechnet. Wenn die Höhe des enthaltenden Blocks nicht explizit angegeben wird (dh von der Höhe des Inhalts abhängt) und dieses Element nicht absolut positioniert ist, wird der Wert zu 'auto' berechnet.

Wenn ich meinem Container eine Mindesthöhe hinzufüge, gebe ich seine Höhe nicht explizit an - daher sollte mein Element eine autoHöhe erhalten. Und genau das tun Webkit und alle anderen Browser.

Zweitens die Problemumgehung, die ich gefunden habe:

Wenn ich mein Containerelement display:tablemit height:inheritihm genau die gleiche Art und Weise wirkt , als ob ich es geben würde , min-heightvon 100%. Und - was noch wichtiger ist - wenn ich das untergeordnete Element darauf setze, display:table-cellerbt es die Höhe des Containerelements perfekt - ob es 100% oder mehr ist.

Vollständiges CSS:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

Das Markup:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

Siehe http://jsfiddle.net/xrebB/54/ .

In height: 1pxzu übergeordneten Container. Funktioniert in Chrome, FF, Safari.

Ich dachte, ich würde dies teilen, da ich dies nirgendwo gesehen habe, und habe es verwendet, um meine Lösung zu reparieren.

LÖSUNG :min-height: inherit;

Ich hatte einen Elternteil mit einer bestimmten Mindestgröße, und ich brauchte ein Kind, das ebenfalls so groß war.

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow
}

.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue
}

p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>

Auf diese Weise fungiert das Kind nun als Größe 100% der Mindestgröße.

Ich hoffe einige Leute finden das nützlich :)

Dies wurde in einem Kommentar von @jackocnr hinzugefügt, aber ich habe es verpasst. Für moderne Browser halte ich dies für den besten Ansatz.

Das innere Element füllt den gesamten Behälter, wenn es zu klein ist, vergrößert jedoch die Höhe des Behälters, wenn es zu groß ist.

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

Die Lösung von Kushagra Gour funktioniert (zumindest in Chrome und IE) und löst das ursprüngliche Problem, ohne display: table;und verwenden zu müssen display: table-cell;. Siehe Plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

Wenn Sie min-height: 100%; height: 1px;das äußere Teil einstellen, beträgt die tatsächliche Höhe je nach Bedarf mindestens 100%. Es ermöglicht dem inneren Div auch, die Höhe korrekt zu erben.

Zusätzlich zu den vorhandenen Antworten können auch Ansichtsfenstereinheiten vhverwendet werden. Einfacher Ausschnitt unten. Natürlich kann es auch zusammen mit verwendet calc()werden, z. B. min-height: calc(100vh - 200px);wenn Seitenkopf und Fußzeile zusammen eine 200pxHöhe haben.

body {
  margin: 0;
}

.child {
  min-height: 100vh;
  background: pink;
}

<div class="parent">
  <div class="child"></div>
</div>

Ich glaube nicht, dass dies ein Fehler bei Browsern ist. Alle verhalten sich gleich - das heißt, sobald Sie keine expliziten Höhen mehr angeben, ist die Mindesthöhe im Grunde ein "letzter Schritt".

Es scheint genau so zu sein, wie es die CSS 2.1-Spezifikation vorschlägt: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Der Prozentsatz wird in Bezug auf die Höhe des Blocks der generierten Box berechnet. Wenn die Höhe des enthaltenden Blocks nicht explizit angegeben wird (dh von der Höhe des Inhalts abhängt) und dieses Element nicht absolut positioniert ist, wird der Wert zu 'auto' berechnet.

Da für das min-heightübergeordnete Element kein expliziter heightEigenschaftssatz festgelegt ist, wird standardmäßig auto verwendet.

Es gibt einige Möglichkeiten, dies zu display: table-cellumgehen, möglicherweise mithilfe neuerer Stile wie Flexbox, wenn dies für die Browser Ihrer Zielgruppe möglich ist. Sie können dies in bestimmten Situationen auch untergraben, indem Sie die Eigenschaften topund bottomfür ein absolut positioniertes inneres Element verwenden, wodurch Sie 100% Höhe erhalten, ohne dies anzugeben.

Obwohl display: flex;hier vorgeschlagen wurde, sollten Sie display: grid;jetzt verwenden, da es weitgehend unterstützt wird . Standardmäßig füllt das einzige untergeordnete Element eines Rasters das übergeordnete Element vollständig aus.

html, body {
  height: 100%;
  margin: 0;
  padding: 0; /* Don't forget Safari */
}

#containment {
  display: grid;
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  background: aqua;
}

Für Googler:

Diese jquery-Problemumgehung bewirkt, dass #containment automatisch eine Höhe erhält (by, height: auto) und dann die tatsächliche Höhe als Pixelwert zugewiesen wird.

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

Der beste Weg, dies heutzutage zu erreichen, ist die Verwendung display: flex;. Beim Versuch, IE11 zu unterstützen, kann jedoch ein Problem auftreten. Laut https://caniuse.com mit Flexbox:

IE 11 richtet Elemente nicht vertikal korrekt aus, wenn die Mindesthöhe verwendet wird

Internet Explorer-kompatible Lösung

Die Lösung besteht darin, sowohl display: table;beim Elternteil als auch display: table-row;beim Kind height: 100%;als Ersatz für zu verwenden min-height: 100%;.

Die meisten der hier aufgeführten Lösungen verwenden display: table, table-rowund / oder table-cell, aber sie haben nicht das gleiche Verhalten wie replizieren min-height: 100%;, die lautet:

• Erben Sie die berechnete Höhe des übergeordneten Elements (im Gegensatz zum Erben seiner heightEigenschaft).
• Lassen Sie die Größe der Eltern überschreiten min-height;

Bei Verwendung dieser Lösung ist das Verhalten dasselbe und die Eigenschaft min-heightwird nicht benötigt, wodurch der Fehler umgangen werden kann.

Erläuterung

Der Grund, warum es funktioniert, ist, dass im Gegensatz zu den meisten Elementen Elemente, die verwendet werden display: tableund table-rowimmer so groß sind wie ihr Inhalt. Dadurch heightverhält sich ihr Eigentum ähnlich wie min-height.

Lösung in Aktion

html, body {
  height: 100px;
  margin: 0;
}

#containment {
  display: table;
  height: 100%;
  background: pink;
  width: 100%;
}

#containment-shadow-left {
  display: table-row;
  height: 100%;
  background: aqua;
}

#content {
  padding: 15px;
}

#demo {
  display: none;
  background-color: red;
  height: 200px;
}

#demo-checkbox:checked ~ #demo {
  display: block;
}

<div id="containment">
  <div id="containment-shadow-left">
    <div id="content">
      <input id="demo-checkbox" type="checkbox">
      <label for="demo-checkbox">Click here for overflow demo</label>
      <div id="demo">This is taller than #containment</div>
    </div>
  </div>
</div>

Eine andere JS-Lösung, die einfach ist und verwendet werden kann, um eine nicht einfache reine CSS- oder zusätzliche Markup- / Hacky-Lösung zu vermeiden.

function minHeight(elm, percent) {
  var windowHeight = isNaN(window.innerHeight) ? 
                     window.clientHeight : window.innerHeight;
  var height = windowHeight * percent / 100;
  elm.style.minHeight = height + 'px';
}

W / jQuery:

function minHeight($elm, percent) {
  var windowHeight = $(window).height();
  var height = windowHeight * percent / 100;
  $elm.css('min-height', height + 'px');
}

Winkelrichtlinie:

myModule.directive('minHeight', ['$window', function($window) {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var windowHeight = isNaN($window.innerHeight) ? 
               $window.clientHeight : $window.innerHeight;
      var height = windowHeight * attrs.minHeight / 100;
      elm.css('min-height', height + 'px');
    }
  };
}]);

So zu verwenden:

<div>
  <!-- height auto here -->
  <div min-height="100">
    <!-- This guy is at least 100% of window height but grows if needed -->
  </div>
</div>

Das funktioniert normalerweise bei mir:

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

 Run code snippetHide results
Expand snippet

Um dieses Thema vollständig zu halten, habe ich eine Lösung gefunden, die hier nicht unter Verwendung der festen Position untersucht wurde.

Kein Überlauf

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-50 {
  height: 50%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-50"></div>
      
    </div>
  </div>
</div>

Mit Überlauf

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-150 {
  height: 150%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-150"></div>
      
    </div>
  </div>
</div>

Dies ist, was für mich funktioniert, wenn die prozentuale Größe und die Eltern immer noch entsprechend der Größe der Kinder wachsen. Funktioniert gut in Firefox, Chrome und Safari.

.parent {
  position: relative;
  min-height: 100%;
}

.child {
  min-height: 100vh;
}

<div class="parent">
    <div class="child"></div>
  </div>

nachdem wir es für uns versucht haben! chrome versteht, dass das untergeordnete Element 100% hoch sein soll, wenn ich den Anzeigewert auf Inline-Block setze. Übrigens wird die Einstellung von float dies verursachen.

display:inline-block

aktualisieren

das funktioniert nicht. Die Lösung besteht darin, die übergeordnete Knotenversatzhöhe zu ermitteln und sie am und der Seite mit Javascript zu verwenden.

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>