Сделать тело на 100% высоты браузера - PullRequest
Новая
       48

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

739 голосов
/ 11 июля 2011

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

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

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

Ответы [ 22 ]

4 голосов
/ 26 октября 2016

Пожалуйста, отметьте это: 

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

Или попробуйте новый метод Высота области просмотра: 

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

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

3 голосов
/ 19 августа 2018

Попробуйте добавить: 

body {
height: 100vh;
}
3 голосов
/ 24 марта 2018

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

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

3 голосов
/ 23 июня 2016

Только с 1 строкой CSS ... Вы можете сделать это. 

body{ height: 100vh; }
3 голосов
/ 20 января 2016

Попробуйте 

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
2 голосов
/ 10 апреля 2019

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

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

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

1 голос
/ 19 декабря 2017

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

0 голосов
/ 04 июня 2018

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

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}
0 голосов
/ 25 мая 2015

У CSS3 есть новый метод. 

 height:100vh

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

Таким образом, ваш код должен быть 

 body{
 height:100vh; 
 }
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...