Как сделать так, чтобы дочерний 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

для родителей:

display: flex;

Вы должны добавить несколько префиксов, http://css -tricks.com / using-flexbox / .

Edit: Как заметил @Adam Garner, выровняйте элементы: stretch; не нужен Его использование также для родителей, а не детей. Если вы хотите определить растяжение детей, вы используете align-self.

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Answer 2

ПРИМЕЧАНИЕ : Этот ответ применим к устаревшим браузерам без поддержки стандарта Flexbox. Для современного подхода см .: https://stackoverflow.com/a/23300532/1155721

---

Предлагаю вам взглянуть на Столбцы равной высоты с кросс-браузерным CSS и без хаков .

По сути, выполнение этого с помощью CSS совместимым с браузером способом не является тривиальным (но тривиальным с таблицами), поэтому найдите подходящее предварительно упакованное решение.

Кроме того, ответ зависит от того, хотите ли вы 100% высоты или равной высоты. Обычно это равная высота. Если высота 100%, то ответ немного другой.

Answer 3

Это неприятная проблема, с которой постоянно сталкиваются дизайнеры. Хитрость в том, что вам нужно установить высоту 100% для тела и HTML в вашем CSS.

html,body {
    height:100%;
}

Этот, казалось бы, бессмысленный код - определять браузеру, что означает 100%. Разочаровывает, да, но это самый простой способ.

Answer 4

Я считаю, что установка двух столбцов display: table-cell; вместо float: left; работает хорошо.

Answer 5

Если вы не возражаете против того, чтобы div навигации был обрезан в случае неожиданно короткого содержимого div, есть как минимум один простой способ:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

В противном случае есть техника искусственных столбцов .

Answer 6

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

Answer 7

с использованием jQuery:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

Answer 8

Попробуйте сделать нижнее поле 100%.

margin-bottom: 100%;

Answer 9

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Посмотрите на этот пример .

Answer 10

После долгих поисков и попыток ничто не решило мою проблему, кроме

style = "height:100%;"

на детей div

и для родителей примените это

.parent {
    display: flex;
    flex-direction: column;
}

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