Как сделать так, чтобы дочерний div был равен 100% высоты родительского div без указания высоты родителя?

Question

У меня есть сайт со следующей структурой:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Навигация находится слева, а раздел содержимого - справа. Информация для div содержимого извлекается через PHP, поэтому каждый раз она меняется.

Как я могу масштабировать навигацию по вертикали, чтобы ее высота соответствовала высоте содержимого div, независимо от того, какая страница загружена?

Answer 1

предоставление position: absolute; ребенку, работавшему в моем случае

Answer 2

Как показано ранее, flexbox является самым простым. например.

#main{ display: flex; align-items:center;}

это выровняет все дочерние элементы по центру внутри родительского элемента.

Answer 3

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

От:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

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

Это был тот же ответ, который я дал на этот Вопрос

Answer 4

Здесь демо старой моды на основе position: absolute контейнера содержимого и position: relative родительского контейнера.

Демо

Что касается современного способа сделать это - flex box являются лучшими.

Answer 5

Самый простой способ сделать это - просто подделать его. «List Apart» широко освещал это на протяжении многих лет, , как в этой статье Дана Седерхольма из 2004 .

Вот как я обычно это делаю:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

Вы можете легко добавить заголовок к этому дизайну, обернув #container в другой div, вставив div заголовка в качестве родственного элемента # контейнера и переместив стили поля margin и width в родительский контейнер. Кроме того, CSS должен быть перемещен в отдельный файл и не храниться в строке и т. Д. И т. Д. Наконец, класс clearfix можно найти в positioniseverything .