Dehnen Sie die untergeordnete Div-Höhe, um die übergeordnete Höhe mit dynamischer Höhe zu füllen

94

Wie in der folgenden Geige zu sehen ist, habe ich zwei divs in einem Elternteil div, die sich gedehnt haben, um das große Div aufzunehmen. Mein Ziel ist es, die divGröße dieser Kinder gleich zu machen .

http://fiddle.jshell.net/y9bM4/

css html

— Khaled
quelle

2

Überprüfen Sie diese Fragen: stackoverflow.com/questions/3049783/… , stackoverflow.com/questions/1575141/… , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@ MikeHometchko gibt es viele auf CSS, aber nicht auf CSS3. Ich glaube schon.

— Mr_Green

1

@ Mr_Green Die Unterschiede auf einer fundamentalen Ebene zwischen "CSS" und CSS3 sind trivial, daher sehe ich das Problem nicht. Dies ist ein sehr häufiges Problem, das zu Tode gestellt und beantwortet wurde.

— Mike H.

1

@ MikeHometchko überprüfe meine Lösung. Ich bin sicher, dass noch niemand das Gleiche geantwortet hat.

— Mr_Green

48

Die Lösung besteht darin display: table-cell, diese Elemente inline zu bringen, anstatt display: inline-blockoder zu verwenden float: left.

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

Erweitern Sie das Snippet

Geige arbeiten

— Herr Green
quelle

Dies funktioniert jedoch nicht, wenn das übergeordnete Element eine Tabellenzelle ist.

— Tomáš Zato - Wiedereinsetzung Monica

53

Verwenden Sie display: flex, um Ihre divs zu dehnen :

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

— Trong Lam Phan
quelle

18

Fügen Sie das folgende CSS hinzu:

Für das übergeordnete div:

style="display: flex;"

Für Kinder div:

style="align-items: stretch;"

— Ayan
quelle

Ich musste stretchdie Kinder hinzufügen, damit Flex für mich arbeiten konnte.

— BadHorsie

4

https://www.youtube.com/watch?v=jV8B24rSN5o

Ich denke, Sie können die Anzeige als Raster verwenden:

.parent { display: grid };

— Gelo K.
quelle

Haben Sie Ihre Antwort mit demselben Code des Originalplakats getestet?

— Mark Stewart

Es funktioniert und erfordert kein CSS für das Kind. Dies liegt daran, dass eine CSS-Grid-Zelle autostandardmäßig Zeilen und Zellen enthält. Es funktioniert tatsächlich ziemlich gut mit IE, wenn Sie display: -ms-grideinige Flexbugs vermeiden, solange Sie nur ein Kind haben.

— ShortFuse

-6

Sie können es einfach mit ein bisschen jQuery tun

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});

— Levon Matevosyan
quelle

3

Sobald die Größe des Browserfensters geändert wurde, wird dies unterbrochen, während die CSS-Fenster weiterhin funktionieren.

— SharpC