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

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

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

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

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

html, 
body {
    height: 100%;
}

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

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

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

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

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

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

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

Пример здесь

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

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

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

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

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, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}

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

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

В начале буквально каждого 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.

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

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

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

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

Вот:

html,body{
    height:100%;
}

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

Вы также можете использовать 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 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;}

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

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

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

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

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

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 строкой CSS ... Вы можете сделать это.

body{ height: 100vh; }

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

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

html
  {
    height:100%;
  }

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

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

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

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

В CSS3 появился новый метод.

 height:100vh

Это делает ViewPort на 100% равным высоте.

Так что ваш код должен быть

 body{
 height:100vh; 
 }