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

96

Как видно из следующей скрипки, у меня есть два divs, содержащихся в родительском элементе div, которые растянуты, чтобы содержать большой div, моя цель - сделать эти дочерние divs равными по высоте.

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 04

1

@Mr_Green: разница на фундаментальном уровне между "CSS" и CSS3 тривиальна, поэтому я не вижу проблемы. Это очень частый вопрос, который задают до смерти, и на него ответили до смерти.

— Майк Х.

1

@MikeHometchko проверь мое решение. Я уверен, что никто не ответил так раньше.

— Mr_Green 04

48

Решение состоит в том, 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>

Развернуть фрагмент

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

— Мистер Грин
источник

Однако это не работает, если родительский элемент является ячейкой таблицы.

— Томаш Зато - Восстановите Монику

55

Используйте, display: flexчтобы растянуть divs:

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

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

JSFIDDLE

— Тронг Лам Фан
источник

19

Добавьте следующий 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 Grid autoпо умолчанию будет иметь строку и ячейку. На самом деле он довольно хорошо работает с IE, если вы используете его, display: -ms-gridчтобы избежать некоторых гибких ошибок, пока у вас есть только один ребенок.

— ShortFuse

-6

Вы можете легко сделать это с помощью jQuery.

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

— Левон Матевосян
источник

3

Хотя после изменения размера окна браузера оно сломается, тогда как CSS все равно будут работать.

— SharpC