У меня есть страница с заголовком (с динамической высотой!) И содержанием. Содержимое должно заполнить остальную часть страницы, даже если в ней недостаточно текста.
Пока это вопрос, который задают много раз и всегда отвечает на что-то вроде кода, который я пробовал:
html, body {
height: 100%;
}
.header {
height: 50px;
background-color: #ff0;
}
.content {
min-height: 100%;
background-color: #ccc;
}
моя проблема в том, что с этим кодом высота .content
не просто заполняет остальную часть страницы, но имеет что-то вроде размера экрана как высоты. Однако с этим кодом мне нужно прокрутить, чтобы увидеть нижнюю часть.content.
код: http://jsbin.com/bilux/1/edit
В настоящий момент появляется полоса прокрутки, когда я устанавливаю высоту.content на 100%:
редактировать:
спасибо за способы решения этой проблемы для статической высоты заголовка! Но разве нет способа сделать это, не зная высоты моего заголовка?
Вы можете использовать функцию calc
следующим образом:
.content {
min-height: calc(100% - 50px);
background-color: #ccc;
}
Также обратите внимание, что по умолчанию край тела может сделать неожиданный результат, вы также должны сбросить его до нуля.
UPDATE: если вы хотите, чтобы он был более динамичным, я уверен, что вы можете попробовать использовать раскладку flex-box, но он по-прежнему не поддерживается широко (только последние версии самых современных браузеров. Для более старых браузеров вы должны добавлять библиотеки, такие как prefixfree). Другое решение - вы можете попробовать использовать табличный макет для заголовка, как в этом обновленном демо.
Вы используете 100% страницы, в то время как другие элементы используют некоторое пространство. Сократите свой процент на основе используемого пространства. Например, на моем сайте требуется 92%
Элемент WIDTH и HEIGHT основан на BODY страницы (которая основана на HTML -странице страницы), а не в пространстве, которое доступно. Таким образом, 100% составляет 100% экранного пространства. В то время как другие элементы на странице могут использовать 10% этого пространства и подталкивают контент до 110%.
Это та же концепция, когда ваша страница заполняется контентом, и вы получаете полосу прокрутки. Высота тела растет в зависимости от высоты контейнера области содержания, содержащего растущий контент.
absolute
позиционирование может быть ответом. Зависит от структуры всей страницы. Проверьте это http://jsbin.com/qeveroci/1/edit