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

108
13

У меня странная, довольно странная проблема. Проблема в том, что я хочу установить минимальную высоту на 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/

спросил(а) 2013-07-31T14:25:00+04:00 6 лет, 4 месяца назад
1
Решение
85

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


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


qaru.site/questions/65435/...

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


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



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

ответил(а) 2013-07-31T14:31:00+04:00 6 лет, 4 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема