Как растянуть body и html на всю высоту браузера?

152
18 февраля 2019, 00:30

Есть такой глюк на странице, html и body не растягиваются на всю высоту браузера из-за этого все внутренние элементы выходят за ее пределы. Как это исправить?

Задал 

html, body {
    height: 100%;
}

не помогло.

Answer 1

Все растягивается:

* { 
  box-sizing: border-box; 
} 
 
html, body { 
  width: 100%; 
  height: 100%; 
  background: #ccc; 
  padding: 0; 
  margin: 0; 
}

Вместе с содержимым container тоже на всю высоту:

* { 
  box-sizing: border-box; 
} 
 
html, body { 
  width: 100%; 
  height: 100%; 
  background: #ccc; 
  padding: 0; 
  margin: 0; 
} 
 
.container { 
  background: orangered; 
  height: 100%; 
}
<div class="container"></div>

А вот если Вы об этом, что вн. контент больше высоты экрана (высоты body, html):

* { 
  box-sizing: border-box; 
} 
 
html, body { 
  width: 100%; 
  height:100%; 
  background: #ccc; 
  padding: 0; 
  margin: 0; 
   
  border: 2px solid #000; 
} 
 
.container { 
  background: orangered; 
  height: 2000px; 
}
<div class="container"></div>

Тогда либо убрать для body, html высоту в 100%, либо задавать минимальную высоту (min-height: 100vh или min-height: 600px).

* { 
  box-sizing: border-box; 
} 
 
html, body { 
  width: 100%; 
  background: #ccc; 
  padding: 0; 
  margin: 0; 
   
  border: 2px solid #000; 
} 
 
.container { 
  background: orangered; 
  height: 2000px; 
}
<div class="container"></div>

Answer 2

Вот код без min-height: 100vh:

html, 
body { 
  margin: 0; 
  padding: 0; 
  border: 2px solid red; 
  box-sizing: border-box; 
/*  min-height: 100vh; */ 
}

А вот код с ним: 

html, 
body { 
  margin: 0; 
  padding: 0; 
  border: 2px solid red; 
  box-sizing: border-box; 
  min-height: 100vh; 
}

Answer 3

Не фиксируй высоту явно, всегда min-height задавай. А то если дочерние компоненты превысят высоту, начнут выпадать из контейнера.

Answer 4

можно и так сделать, а содержимое уже высоту определит. Залей на гитхаб может, и ссылку дай

* { 
  box-sizing: border-box; 
} 
 
html, body { 
  background: #ccc; 
  padding: 0; 
  margin: 0; 
}

Answer 5

Не совсем понимаю проблему. Для html не видел чтобы css задавали, он и без них нормально тянется. Для body зафиксировал высоту, и контейнеры выпадать стали.

У первого контейнера высота минимальная задана, поэтому он увеличивает высоту, так как второй контейнер превысил эту высоту.

*{ 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
} 
html{ 
  width: 100%; 
  background:red; 
} 
body{ 
  width: 70%; 
  height: 200px; 
  margin: 0 auto; 
  background:yellow; 
} 
.container-1{ 
  width: 60%; 
  min-height: 100px; 
  margin: 0 auto; 
   
  background-color: blue; 
} 
.container-2 { 
  width: 50%; 
  height:  250px; 
  margin: 0 auto; 
   
  background-color: green; 
}
<div class="container-1"> 
  <div class="container-2"></div> 
</div>

codepen

READ ALSO
CSS :active не срабатывает при нажатии на кнопку
HTML

CSS :active не срабатывает при нажатии на кнопку

Не хочет нажиматься кнопка "Связаться" (анимироваться (:active))Проблема скорее всего с использованием nav и div, но я в упор не пойму, где косяк

 164
Как вытащить угол поворота из matrix3d?
HTML

Как вытащить угол поворота из matrix3d?

У блока задается поворот через matrix3dКак вытащить угол поворота по каждой оси?

 158
Как изменить ползунки слайдера?
HTML

Как изменить ползунки слайдера?

Есть слайдер с измененными ползунками (clip-path)Как можно сделать так, чтобы при максимальном сведении ползунков, "стрелки" ползунков смещались...

 106
Как поменять ширину отдельной ячейки
HTML

Как поменять ширину отдельной ячейки

Есть таблица, ширина первого столбца 30pxНужно сделать ячейку 1а шириной 50px, оставив при этом остальную структуру неизменной

 123