Высота CSS работает, но min-height не работает

У меня странная, довольно странная проблема. Проблема в том, что я хочу установить минимальную высоту на 100%, то есть содержание страницы должно охватывать весь экран пользователя, и, если возможно, страница должна продлиться, если контент превышает 100%. Простым способом было бы установить минимальную высоту: 100% и установить высоту: auto - это именно то, что я хочу, но независимо от того, сколько раз я пытаюсь, проблема остается там.

Я использую высоту auto и min-height: 100% для всех элементов, но она не работает. Если я удаляю min-height, чтобы включить только высоту: 100%, то она работает как шарм, но затем, когда содержимое больше, он переполняет весь нижний колонтитул.

Пожалуйста, помогите мне вот css:

html, body, container, row, col-lg-3, col-lg-9 {
     min-height: 100%;
     height: auto !important;
     height: 100%;
 }
 .container {
     max-width: 1170px;
     min-height: 100%;
     height: auto !important;
     height: 100%;
 }
 .col-lg-3 {
     min-height:100%;
     height:100%;
 }
 .col-lg-9 {
     min-height: 100%;
     height: 100%;
 }

Вот страница, показывающая проблему: http://contestlancer.com/ai/GP/

Ответ 1

Да, это боль, но как это работает. Высота может быть унаследована от позиционированных родителей, но не тогда, когда у них есть свойство min-height.

Дети элементов с min-height, установленными на 100%, не могут наследовать их родительскую высоту с помощью процента...

fooobar.com/info/65435/...

Спецификации CSS2.1:

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

Используйте position: relative; height: 100% для контейнеров для решения этой проблемы и добавьте min-height: 100%; к самому глубокому дочернему элементу.