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

Для родительского элемента необходимо использовать свойство:

display: flex;

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

Хотя align-items: stretch; тоже необходимо, нужно отметить, что stretch является значением по умолчанию для align-items, поэтому задавать его явно не обязательно. Однако, если вы установите align-items на другое значение, это может привести к проблемам. (если углубиться в детали, по умолчанию для align-items установлено значение normal, но в контексте флекс-контейнеров это ведет себя так же, как stretch)

Важно отметить, что align-items применяется к дочерним элементам, а не к самому элементу, к которому оно добавляется. Если вы хотите задать поведение для растяжения дочерних элементов, вы можете использовать align-self.

Пример:

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

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

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

HTML:

<div class="parent">
  <div class="other-child">
    Используется только для растяжения родителя
  </div>
  <div class="child"></div>
</div>

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

html, body {
    height: 100%;
}

Этот, казалось бы, бессмысленный код необходим для того, чтобы указать браузеру, что именно означает 100%. Да, это может вызывать неудобства, но это самый простой способ решить проблему.

Я обнаружил, что использование display: table-cell; для двух колонок вместо float: left; работает гораздо лучше.

Если вы задали вопрос о данном CSS-коде на StackOverflow, то можно пояснить его следующим образом:

#main {
    overflow: hidden; /* Скрывает содержимое, выходящее за пределы контейнера #main */
}

#navigation, #content {
    margin-bottom: -1000px; /* Отрицательный внешний отступ, который может смещать элемент вверх */
    padding-bottom: 1000px; /* Добавляет внутренний отступ в 1000px внизу, возможно, для создания пространства */
}

Такой подход позволяет создать некую "текстовую область", где содержимое в #navigation и #content не будет влиять на поток документа, оставаясь при этом видимым. Отрицательный margin фактически выводит элементы вверх, что может быть использовано для создания определённых визуальных эффектов, однако стоит быть осторожным с подобными приемами, так как это может привести к проблемам с отзывчивостью и доступностью элементов. Будьте внимательны при использовании отрицательных внешних отступов, так как они могут вызвать нежелательные эффекты в верстке.

Вы можете использовать следующий код на 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();
});

Этот скрипт работает следующим образом:

1. Оборачиваем код в $(function() { ... });, чтобы дождаться полной загрузки DOM.
2. Определяем функцию unifyHeights, которая ищет максимальную высоту среди дочерних элементов с идентификаторами #navigation и #content, находящихся внутри элемента с идентификатором #container.
3. Используем метод .each(), чтобы пройтись по каждому из этих элементов и получить их высоту с помощью .outerHeight().
4. Сравниваем текущую высоту с maxHeight и, если текущая высота больше, обновляем maxHeight.
5. После вычисления максимальной высоты устанавливаем её для обоих элементов #navigation и #content с помощью метода .css().

С помощью этого кода оба элемента будут иметь одинаковую высоту, равную максимальной высоте из них. Это может быть полезно, если вы хотите, чтобы элементы имели одинаковый визуальный размер.