Розтягніть висоту дочірнього div для заповнення батьків, які мають динамічну висоту

94

Як видно з наступної скрипки, у мене є два divs, що містяться в одному з батьків div, які розтягнулися, щоб містити великий div, моя мета - зробити цих дітей divрівними по зросту.

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

css html

— Халед
джерело

2

перевірити ці питання: stackoverflow.com/questions/3049783 / ... , stackoverflow.com/questions/1575141 / ... , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@MikeHometchko є багато на CSS, але не на CSS3. Я думаю так.

— Mr_Green

1

@Mr_Green відмінності на фундаментальному рівні між "CSS" і CSS3 є тривіальними, тому я не бачу проблеми. Це дуже поширене питання, яке задавали і відповідали до смерті.

— Mike H.

1

@MikeHometchko перевір моє рішення. Я впевнений, що раніше ніхто не відповідав так само.

— Mr_Green

47

Рішення полягає у використанні, display: table-cellщоб привести ці елементи в рядки, замість того, щоб використовувати display: inline-blockабо 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>

Розгорніть фрагмент

Робоча скрипка

— Mr_Green
джерело

Це не працює, якщо батьківським елементом є комірка таблиці.

— Томаш Зато - відновити Моніку

55

Використовуйте display: flexдля розтяжки div:

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

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

JSFIDDLE

— Тронг Лам Фан
джерело

18

Додайте наступний CSS:

Для батьківського div:

style="display: flex;"

Для дочірнього div:

style="align-items: stretch;"

— Аян
джерело

Мені потрібно було додати stretchна дітей, щоб флекс працював для мене.

— BadHorsie

4

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

Я думаю, ви можете використовувати дисплей як сітку:

.parent { display: grid };

— Гело К
джерело

Ви протестували свою відповідь, використовуючи той самий код оригінального плаката?

— Марк Стюарт,

Це працює і не вимагає CSS для дитини. Це тому, що комірка сітки CSS autoза замовчуванням матиме рядок і комірку. Це насправді дуже добре працює з IE, якщо ви використовуєте, display: -ms-gridщоб уникнути деяких флеш-багів, якщо у вас є лише одна дитина.

— ShortFuse

-6

Ви можете легко це зробити за допомогою трохи jQuery

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

— Левон Матевосян
джерело

3

Хоча після зміни розміру вікна браузера це зламається, тоді як CSS все одно працюватимуть.

— SharpC