Сделать тело на 100% высоты браузера
Я хочу, чтобы body имел 100% высоты браузера. Могу ли я сделать это с помощью CSS?
Я пробовал настройку height: 100%, но это не работает.
Я хочу установить цвет фона для страницы, чтобы заполнить все окно браузера, но если на странице мало контента, я получаю уродливую белую полосу внизу.
27 ответов
Попробуйте также установить высоту HTML-элемента на 100%.
html,
body {
height: 100%;
}
Тело ищет своего родителя (HTML) для масштабирования динамического свойства, поэтому для HTML-элемента также необходимо установить его высоту.
Однако содержание тела, вероятно, должно будет динамически меняться. Установка минимальной высоты на 100% позволит достичь этой цели.
html {
height: 100%;
}
body {
min-height: 100%;
}
В качестве альтернативы настройке как html а также body высоты элемента в 100% Вы также можете использовать длину в процентах от viewport.
5.1.2. Длина просмотра в процентах: единицы 'vw', 'vh', 'vmin', 'vmax'
Длина области просмотра в процентах относится к размеру исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они масштабируются соответственно.
В этом случае вы можете использовать значение 100vh - которая является высотой области просмотра.
body {
height: 100vh;
}
body {
min-height: 100vh;
}
Это поддерживается в большинстве современных браузеров - поддержку можно найти здесь.
Если у вас есть фоновое изображение, вы можете установить это вместо:
html{
height: 100%;
}
body {
min-height: 100%;
}
Это гарантирует, что ваш тег body будет продолжать расти, когда содержимое выше, чем область просмотра, и что фоновое изображение будет повторяться / прокручиваться / что угодно, когда вы начнете прокручиваться вниз.
Помните, что если вам нужна поддержка IE6, вам нужно найти способ втиснуть height:100% для тела, IE6 лечит height лайк min-height тем не мение.
Если вы хотите сохранить поля на теле и не хотите использовать полосы прокрутки, используйте следующую команду CSS:
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
настройка body {min-height:100%} даст вам полосы прокрутки.
См. Демонстрацию на http://jsbin.com/aCaDahEK/2/edit?html,output.
После тестирования различных сценариев, я считаю, что это лучшее решение:
html {
width:100%;
height: 100%;
display: table;
}
body {
width:100%;
display:table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
Он динамичен в том, что html и элемент body автоматически расширяются, если их содержимое переполняется. Я проверил это в последней версии Firefox, Chrome и IE 11.
Смотрите полную скрипку здесь (для тех, кто ненавидит таблицу, вы всегда можете изменить ее на использование div):
https://jsfiddle.net/71yp4rh1/9/
При этом, есть несколько вопросов с ответами, размещенными здесь.
html, body {
height: 100%;
}
Использование вышеуказанного CSS приведет к автоматическому расширению html и элемента body, если их содержимое переполнится, как показано здесь:
https://jsfiddle.net/9vyy620m/4/
Как прокручиваете, замечаете повторяющийся фон? Это происходит потому, что высота элемента body НЕ увеличилась из-за переполнения дочерней таблицы. Почему он не расширяется как любой другой элемент блока? Я не уверен. Я думаю, что браузеры обрабатывают это неправильно.
html {
height: 100%;
}
body {
min-height: 100%;
}
Установка минимальной высоты тела на 100%, как показано выше, вызывает другие проблемы. Если вы сделаете это, вы не сможете указать, что дочерний элемент div или таблица занимают процентную высоту, как показано здесь:
https://jsfiddle.net/aq74v2v7/4/
Надеюсь, это кому-нибудь поможет. Я думаю, что браузеры обрабатывают это неправильно. Я ожидаю, что рост тела автоматически отрегулируется, если его дети переполнятся. Однако этого не происходит, когда вы используете 100% высоты и 100% ширины.
Быстрое обновление
html, body{
min-height:100%;
overflow:auto;
}
Лучшее решение с сегодняшним CSS
html, body{
min-height: 100vh;
overflow: auto;
}
В начале буквально каждого CSS-файла я использую следующее:
html, body{
margin: 0;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
Поле 0 гарантирует, что элементы HTML и BODY не будут автоматически позиционироваться браузером, чтобы иметь место слева или справа от них.
Заполнение 0 гарантирует, что элементы HTML и BODY не будут автоматически толкать все внутри них вниз или вправо из-за настроек браузера по умолчанию.
Варианты ширины и высоты установлены на 100%, чтобы гарантировать, что браузер не изменяет их размер в ожидании фактического наличия автоматически устанавливаемого поля или отступа, с минимальными и максимальными значениями на случай, если произойдут какие-то странные, необъяснимые вещи, хотя вы вероятно, они не нужны.
Это решение также означает, что, как я делал, когда я впервые начал работать с HTML и CSS несколько лет назад, вам не придется <div> margin:-8px; чтобы он поместился в углу окна браузера.
Перед публикацией я посмотрел свой другой полноэкранный CSS-проект и обнаружил, что все, что я использовал, было только body{margin:0;} и ничего больше, что работало хорошо в течение 2 лет, я работал над этим.
Надеюсь, этот подробный ответ поможет, и я чувствую вашу боль. На мой взгляд, глупо, что браузеры должны устанавливать невидимую границу на левой, а иногда и на верхней стороне элементов body / html.
Здесь есть несколько хороших ответов, но есть и некоторые недоразумения. Я поддерживаю следующие настройки для современных браузеров при стилизации размеров на веб-страницах:
html {
height: 100%; /* fallback for IE and older browsers */
height: 100vh;
}
body {
height: auto; /* required to allow content to expand vertically without overflow */
width: auto;
min-height: 100%; /* fallback for IE and older browsers */
min-height: 100vh;
margin: 0;
padding: 0;
}
Во-первых, новые единицы области просмотра ("vh") избыточны и не нужны, если вы установили высоту. Причина в том, что объект получает свои значения от родителя. Вы по-прежнему можете использовать единицы измерения «vh», чтобы обойти родительский объект и получить размеры его свойств непосредственно из области просмотра. Но это необязательно, если есть высота.
Обратите внимание, что я установил. Вы НЕ хотите устанавливать
height а также
width к
100%, или определенные значения, так как это ограничивает контент размерами области просмотра, и произойдет переполнение. ваш лучший друг в CSS! С использованием
overflow:autoсвойства не нужны, если вы устанавливаете на. Это говорит странице, что контент должен увеличивать высоту до любого необходимого размера, даже если это превышает высоту области просмотра, если это необходимо. Не вылезет из габаритов. И это позволяет прокручивать по мере необходимости.
auto также позволяет иметь поля и по-прежнему поддерживать страницы, заполняющие область просмотра, используя
min-height. Я считаю
height:auto в любом случае является значением по умолчанию для body в большинстве таблиц стилей браузера UA.
Добавление затем дает вам высоту по умолчанию, которую вы хотите иметь, а затем позволяет размерам страницы заполнять область просмотра без выхода содержимого за пределы тела. Это работает только потому, что оно основано на области просмотра.
Две КРИТИЧЕСКИЕ части здесь - это не единицы, например
% или
vh, но убедитесь, что корневой элемент или установлен на 100% высоты области просмотра. Во-вторых, важно, чтобы тело
min-height:100% или
min-height:100vhпоэтому он начинает заполнять высоту области просмотра, какой бы она ни была. Больше ничего не нужно. Обратите внимание, что я добавил свойства «fallback» для min-height, так как многие браузеры после 2010 года не поддерживают единицы измерения «vh». Приятно притворяться, что все в веб-мире используют самые последние и лучшие, но реальность такова, что многие устаревшие браузеры все еще существуют сегодня в крупных корпоративных сетях, все еще используют устаревшие браузеры, которые не понимают эти новые устройства.
ВЫСОТА СТИЛЯ ДЛЯ НАСЛЕДИЕ БРАУЗЕРОВ
Одна из вещей, которые мы забываем, это то, что многие очень старые браузеры не знают, как правильно заполнить высоту области просмотра. К сожалению, эти устаревшие браузеры просто должны были иметь
height:100% на обоих
html элемент и
body. Если вы этого не сделаете, цвета фона браузера и другие странные визуальные эффекты будут вытекать под контентом, который не заполняет область просмотра. Мы решили это, предоставив эти 100% значения только старым пользовательским агентам. Помните об этом, если вы тестируете устаревший браузер.
html {
height:100%;
}
body {
height:100%;
width:auto;
margin:0;
padding:0;
}
Вы также можете использовать JS при необходимости
var winHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
var pageHeight = $('body').height();
if (pageHeight < winHeight) {
$('.main-content,').css('min-height',winHeight)
}
Вот:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
Я бы использовал это
html, body{
background: #E73;
min-height: 100%;
min-height: 100vh;
overflow: auto; // <- this is needed when you resize the screen
}<html>
<body>
</body>
</html>Браузер будет использовать min-height: 100vh и если каким-то образом браузер немного старше min-height: 100% будет запасной вариант.
overflow: auto необходимо, если вы хотите, чтобы body и html увеличивали свою высоту при изменении размера экрана (например, до размера мобильного телефона)
Если вам не нужна работа по редактированию собственного CSS-файла и самостоятельному определению правил высоты, наиболее типичные CSS-фреймворки также решают эту проблему с помощью элемента body, заполняющего всю страницу, среди прочих проблем, легко с несколькими размеры видовых экранов.
Например, Tacit CSS Framework решает эту проблему из коробки, где вам не нужно определять какие-либо правила и классы CSS, и вы просто включаете файл CSS в ваш HTML.
Пытаться
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
Пожалуйста, проверьте это:
* {margin: 0; padding: 0;}
html, body { width: 100%; height: 100%;}
Или попробуйте новый метод Viewport height:
html, body { width: 100vw; height: 100vh;}
Окно просмотра: если вы используете окно просмотра, значит экран любого размера будет иметь полную высоту экрана.
Для истинных пуристов этот соблюдает поля браузера по умолчанию и предотвращает нежелательную прокрутку, генерируемую другими методами, помимо увеличения при увеличении содержимого. Протестировано в Chrome, Safari и Firefox. Фоны только для галочки...
Только с 1 строкой CSS... Вы можете сделать это.
body{ height: 100vh; }
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
html body {
min-height: 100%
}
Работает для всех основных браузеров: FF, Chrome, Opera, IE9+. Работает с фоновыми изображениями и градиентами. Полосы прокрутки доступны по мере необходимости контента.
Все ответы на 100% правильные и хорошо объясненные, но я сделал что-то хорошее и очень простое, чтобы сделать его отзывчивым.
здесь элемент будет занимать 100% высоты порта обзора, но когда дело доходит до мобильного просмотра, он не очень хорошо выглядит на портретном представлении (мобильном), поэтому, когда порт обзора уменьшается, элемент будет сворачиваться и перекрываться друг на друга. поэтому, чтобы сделать его немного отзывчивым, вот код. надеюсь, кто-то получит помощь от этого.
<style>
.img_wrap{
width:100%;
background: #777;
}
.img_wrap img{
display: block;
width: 100px;
height: 100px;
padding: 50px 0px;
margin: 0 auto;
}
.img_wrap img:nth-child(2){
padding-top: 0;
}
</style>
<div class="img_wrap">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>
<script>
var windowHeight = $(window).height();
var elementHeight = $('.img_wrap').height();
if( elementHeight > windowHeight ){
$('.img_wrap').css({height:elementHeight});
}else{
$('.img_wrap').css({height:windowHeight});
}
</script>
Вот демоверсия JSfiddle.
Спустя более 20 ответов, и, похоже, ни один из них не упомянул фактор, который, как я обнаружил, был самым важным - разметка.
Попробовав практически все ответы на этот и несколько других вопросов, я изменил структуру разметки на что-то вроде следующего:
<body>
<div class="section1">
<nav>
</nav>
...
</div>
<div class="section2">
</div>
</body>
По сути, для этого требуются два разных внешних контейнера. Первый контейнер предназначен для содержания панели навигации и расширения цвета / изображения фона до высоты браузера, а второй - для содержания всего, что находится «ниже сгиба», включая второй цвет / изображение фона.
Это решение позволяет фону первого контейнера расширяться до самого низа, оставляя второй контейнер свободным, чтобы он занимал столько места, сколько ему нужно.
С этого момента единственный CSS, необходимый для получения результата, который требовался как мне, так и исходному вопросу, следующий:
body {
height: 100%;
}
.section1 {
height: 100%;
background: black; /* for demo purposes */
}
.section2 {
background: white; /* for demo purposes */
}
Я стилизую контейнер div - обычно единственный дочерний элемент тела с помощью следующего css
.body-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
}
Здесь обновление
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
Теперь есть новый способ, поддерживаемый всеми современными браузерами. Просто используйте:
.el {
height: -moz-available;
height: -webkit-fill-available;
height: stretch;
}
@media all {
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
} }
О дополнительном пространстве внизу: ваша страница является приложением ASP.NET? Если это так, возможно, в вашей разметке есть все, что нужно. Не забудьте также оформить форму. Добавление overflow:hidden; чтобы форма могла убрать лишнее пространство внизу.
В CSS3 появился новый метод.
height:100vh
Это делает ViewPort на 100% равным высоте.
Так что ваш код должен быть
body{
height:100vh;
}