Сделать тело на 100% высоты браузера


845

Я хочу, чтобы body имел 100% высоты браузера. Могу ли я сделать это с помощью CSS?

Я попытался установить height: 100%, но это не работает.

Я хочу установить цвет фона для страницы, чтобы заполнить все окно браузера, но если на странице мало контента, я получаю уродливую белую полосу внизу.


Ответы:


1092

Попробуйте также установить высоту HTML-элемента на 100%.

html, 
body {
    height: 100%;
}

Тело ищет своего родителя (HTML), как масштабировать динамическое свойство, поэтому для HTML-элемента также должна быть установлена ​​его высота.

Однако содержание тела, вероятно, нужно будет динамически менять. Установка минимальной высоты на 100% позволит достичь этой цели.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

6
спасибо, похоже, это убирает белую полосу на коротких страницах, но теперь на страницах, высота которых превышает высоту окна браузера, я получаю белую полосу в 20 пикселей внизу: |
bodyofheat

49
хорошо, я узнал! это работает, если я добавлю html, body {min-height: 100%;}: D
bodyofheat

12
Примечание: если вы используете body {min-height}версию, то вы не можете использовать .body-child{height: 100%}трюк.
Салман А

14
лучший ответ - с помощью CSS3, используя vh-> body { height: 100vh }- проверьте ответ здесь stackoverflow.com/a/25829844/2680216
Адриано Резенди

2
@bFunc У меня есть проблема с Chrome. html {height: 100%;} body {height: auto} выполняет работу.
GBMan

218

В качестве альтернативы настройки оба htmlи bodyэлемента высот 100%, вы можете также использовать окно просмотра-процентную длину.

5.1.2. Длина в процентах от области просмотра: единицы измерения: 'vw', 'vh', 'vmin', 'vmax'

Длина области просмотра в процентах относится к размеру исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они масштабируются соответственно.

В этом случае вы можете использовать значение 100vh- высоту области просмотра.

Пример здесь

body {
  height: 100vh;
  padding: 0;
}
body {
  min-height: 100vh;
  padding: 0;
}

Это поддерживается в большинстве современных браузеров - поддержку можно найти здесь .


4
Помимо того, что это очень просто, также хорошо, что мы применяем новые методы.
Пан Вангперавонг

3
@ niaster Я определенно согласен. Поддержка браузера уже улучшилась с тех пор, как я опубликовал этот ответ :)
Джош Крозье

1
@incarnate Да .. очень плохо, что нет :) Похоже, что последний раз, когда ОП был в сети, был 7/11/11 (дата, когда был задан вопрос ...), поэтому я сомневаюсь, что это изменится.
Джош Крозье

18
Не уверен, почему нам нужно начинать «внедрять новые практики», когда старая практика работает нормально. В этом нет никакого преимущества: код не меньше и не работает лучше, и есть еще браузеры, которые не поддерживают vw / vh.
Цимманон

3
Таблица стилей пользовательского агента Chrome добавляет 8px поле к телу по умолчанию (не уверен в других браузерах), поэтому мне пришлось также добавить, margin: 0;чтобы избежать постоянной вертикальной полосы прокрутки справа.
Энди Раддац

121

Если у вас есть фоновое изображение, вы можете установить это вместо:

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Это гарантирует, что ваш тег body будет продолжать расти, когда содержимое выше, чем область просмотра, и что фоновое изображение будет повторяться / прокручиваться / что угодно, когда вы начнете прокручиваться вниз.

Помните, что если вам нужно поддерживать IE6, вам нужно будет найти способ втиснуть height:100%тело, IE6 работает heightкак и в min-heightлюбом случае.


Также работает, когда есть глобальный flexbox прямо под телом (body> # flexbox-wrapper)
justnorris

2
Это правильный ответ, так как принятый ответ не будет расти, так как контент становится длиннее одного экрана.
SimplGy

Большое спасибо, Angry Dan, что уродливое пустое пространство внизу моего сайта исчезло!
Борис Бурков

Конечно, так как этот вопрос был задан, измерения на основе портов стали предметом. Так что теперь вы можете просто сделатьbody{min-height: 100vh}
Angry Dan

Вам также нужно, body { height: auto; }чтобы полосы прокрутки не отображались в FireFox. кроме этого, работает отлично.
Torxed

82

Если вы хотите сохранить поля на теле и не хотите использовать полосы прокрутки, используйте следующую 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 .


7
Спасибо за единственный рабочий ответ :) Я предполагаю, что "абсолютный" заставил это работать
Дмитрий Матвеев

Хорошо работает в Firefox без полос прокрутки, спасибо. Принятый ответ не дает.
Андрей

@ Андрей, как ни странно, в FireFox появляются полосы прокрутки. Однако то, что вам нужно для принятого ответа, также содержится height: auto;в bodyпредложении для всплывающих полос прокрутки.
Torxed

@Torxed У меня все еще есть полосы прокрутки в FireFox. Похоже, что мне не удалось добавить автоматическую настройку высоты :(
Трэвис Крам

Это не сработало для меня в Chrome 56.0.2924.87 (64-разрядная версия).
Райан


24

После тестирования различных сценариев, я считаю, что это лучшее решение:

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% ширины.


3
Я перепробовал все ответы на этой странице, но ни один из них не сработал. Этот сделал!
Райан

Этот ответ должен быть принятым. Это height: 100vhтоже не решение. Установка верхнего контейнера на 100vhвысокий уровень и 100vwможет вызвать проблемы, если контейнер имеет полосы прокрутки - тогда он будет больше, чем должен быть (и может привести к тому, что полосы прокрутки будут видны без необходимости). Это height: 100vhтакже вызвало проблемы для нас на более новых устройствах Android (например, Xiaomi Mi 9 с Android 9), где контейнер был бы больше, чем сам экран, и создавал бы ненужную вертикальную полосу прокрутки для тела документа.
Jtompl

21

В начале буквально каждого 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;}и ничего, что работало хорошо в течение двух лет, над которыми я работал.

Надеюсь, этот подробный ответ поможет, и я чувствую вашу боль. На мой взгляд, глупо, что браузеры должны устанавливать невидимую границу на левой, а иногда и на верхней стороне элементов body / html.


Не могли бы вы объяснить, каково возможное назначение элементов width: 100%body и html? Да, я понимаю, что с практической точки зрения body { margin: 0; }должно быть достаточно в большинстве случаев. Я просто хочу понять более тщательно.
Джон cj

21

Быстрое обновление

html, body{
    min-height:100%;
    overflow:auto;
}

Лучшее решение с сегодняшним CSS

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

2
Чем это отличается от существующих ответов?
Цимманон

3
Я пробовал и других, но у меня не получилось. Это сработало, так что это может быть решением для кого-то нуждающегося. @cimmanon
Джаянт Варшни,

Я должен сказать, что этот работает для меня кроме других ответов с высоким голосом. overflow: autoздесь делают магию. Кстати, я использую Chrome.
SkuraZZ

Единственный вариант (я обнаружил), который позволяет переполнению содержимого изменять высоту.
Даниэль Шарп


4

Вы также можете использовать JS при необходимости

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

Но для этого вам нужно добавить больше вещей, чем нужно, например, библиотеку jQuery и писать на JavaScript, в то время как это можно сделать в CSS.
Front-end Developer

3

Пытаться

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

2
Не могли бы вы объяснить, каково возможное назначение элементов width: 100%body и html? Да, я понимаю, что с практической точки зрения body { margin: 0; }должно быть достаточно в большинстве случаев. Я просто хочу понять более тщательно.
Джон

3

Пожалуйста, проверьте это:

* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

Или попробуйте новый метод Viewport height:

html, body { width: 100vw; height: 100vh;}

Окно просмотра: если вы используете окно просмотра, значит экран любого размера будет иметь полную высоту экрана.


Пожалуйста, включите объяснение вашего решения, чтобы другие, кто нашел этот ответ, могли понять. Спасибо!
Шон,

Не могли бы вы объяснить, каково возможное назначение элементов width: 100%body и html?
Джон

Допустим, у меня есть таблица с 50 столбцами и 1000 строк с номерами от 1000 до 9999, что с ними будет, будут ли они прокручиваться за пределы окна, как мы делаем обычно, или они будут иметь полосу прокрутки типа переполнения
PirateApp

3

Если вам не нужна работа по редактированию собственного CSS-файла и самостоятельному определению правил высоты, наиболее типичные CSS-фреймворки также решают эту проблему с помощью элемента body, заполняющего всю страницу, среди прочих проблем, легко с несколькими размеры видовых экранов.

Например, CSS-платформа Tacit решает эту проблему «из коробки», где вам не нужно определять какие-либо правила и классы CSS, и вы просто включаете файл CSS в ваш HTML.


2
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 +. Работает с фоновыми изображениями и градиентами. Полосы прокрутки доступны по мере необходимости контента.


2

Я бы использовал это

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 увеличивали свою высоту при изменении размера экрана (например, до размера мобильного телефона)



1

все ответы на 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.


0

Здесь обновление

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

-1

О дополнительном пространстве внизу: ваша страница является приложением ASP.NET? Если это так, возможно, в вашей разметке есть все, что нужно. Не забудьте также оформить форму. Добавление overflow:hidden;в форму может удалить лишнее пространство внизу.


6
Я не рекомендую использовать overflow: hidden, если у вас нет веских причин. Узнайте, почему вещи переполняются, и приспособьтесь, чтобы они не переполнились
jontro

-1
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

Не могли бы вы объяснить, каково возможное назначение элементов width: 100%body и html? Да, я понимаю, что с практической точки зрения body { margin: 0; }должно быть достаточно в большинстве случаев. Я просто хочу понять более тщательно.
Джон

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.