высота: 100% переполняет содержимое

0

У меня есть страница с заголовком (с динамической высотой!) И содержанием. Содержимое должно заполнить остальную часть страницы, даже если в ней недостаточно текста.

Пока это вопрос, который задают много раз и всегда отвечает на что-то вроде кода, который я пробовал:

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%:

Изображение 174551

редактировать:

спасибо за способы решения этой проблемы для статической высоты заголовка! Но разве нет способа сделать это, не зная высоты моего заголовка?

Теги:

3 ответа

3
Лучший ответ

Вы можете использовать функцию calc следующим образом:

.content {
 min-height: calc(100% - 50px);
 background-color: #ccc;
}

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

Рабочая демонстрация.

UPDATE: если вы хотите, чтобы он был более динамичным, я уверен, что вы можете попробовать использовать раскладку flex-box, но он по-прежнему не поддерживается широко (только последние версии самых современных браузеров. Для более старых браузеров вы должны добавлять библиотеки, такие как prefixfree). Другое решение - вы можете попробовать использовать табличный макет для заголовка, как в этом обновленном демо.

  • 0
    но что если я не знаю высоту моего заголовка?
  • 0
    Вы догадываетесь Прочитайте мой ответ.
Показать ещё 1 комментарий
1

Вы используете 100% страницы, в то время как другие элементы используют некоторое пространство. Сократите свой процент на основе используемого пространства. Например, на моем сайте требуется 92%

Элемент WIDTH и HEIGHT основан на BODY страницы (которая основана на HTML -странице страницы), а не в пространстве, которое доступно. Таким образом, 100% составляет 100% экранного пространства. В то время как другие элементы на странице могут использовать 10% этого пространства и подталкивают контент до 110%.

Это та же концепция, когда ваша страница заполняется контентом, и вы получаете полосу прокрутки. Высота тела растет в зависимости от высоты контейнера области содержания, содержащего растущий контент.

0

absolute позиционирование может быть ответом. Зависит от структуры всей страницы. Проверьте это http://jsbin.com/qeveroci/1/edit

Ещё вопросы

Сообщество Overcoder
Наверх
Меню