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

Question

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

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

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

Answer 1

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

html, 
body {
    height: 100%;
}

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

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

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

Answer 2

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

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

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

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

Пример здесь

body {
    height: 100vh;
}

body {
    min-height: 100vh;
}

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

Answer 6

В начале буквально каждого 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> a margin:-8px;, чтобы он поместился в углу браузера. окно.

---

Перед публикацией я посмотрел свой другой полноэкранный CSS-проект и обнаружил, что все, что я использовал, это просто body{margin:0;} и ничего больше, что хорошо работало в течение двух лет, над которыми я работал.

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

Answer 7

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

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%, как показано выше, вызывает другие проблемы.Если вы сделаете это, вы не сможете указать, что дочерний элемент или таблица занимают процентную высоту, как показано здесь:

https://jsfiddle.net/aq74v2v7/4/

Надеюсь, это кому-нибудь поможет.Я думаю, что браузеры обрабатывают это неправильно.Я ожидал бы, что рост тела автоматически отрегулируется, увеличиваясь, если его дети переполняются.Однако этого не происходит при использовании 100% высоты и 100% ширины.

Answer 8

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

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

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

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

Answer 9

Здесь:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

Answer 10

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

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

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