0

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

Задал

html, body {
    height: 100%;
} 

не помогло.

10

5 ответов 5

2

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

* {
  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>

8
  • Может проблема именно с последней секцией? Потому что до последней секции все тянется хорошо.
    – Артур
    14 окт 2018 в 10:47
  • Мне кажется именно последняя секция не растягивается. Именно элементы выпадают с последней секции.
    – Артур
    14 окт 2018 в 10:48
  • Может быть есть возможность весь код сюда выложить? Подозреваю что еще есть элементы с float в данном случае стоит применить для всей обертки (body') overflow:hidden` или clearfix применять. Бывает теряется закрывающий тег и все тоже ломается. Ситуации разные бывают как и баги)
    – SVE
    14 окт 2018 в 11:10
  • float у меня нет, я использую флексбокс, мне кажется это проблема именно с position, потому что когда я position убрал, все стало на свои места, но мне нужен все равно position, чтобы с позиционировать элемент по отношению к блоку, но только чтоб элементы не выпадали из своего потока
    – Артур
    14 окт 2018 в 11:14
  • 1
    Спасибо большое за помощь, я наконец-то решил эту проблему, я убрал отрицательный марджин, и добавил элементу position: relative с отрицательным значением, и все стало как надо, это походу глюк из-за отрицательного марджина был
    – Артур
    14 окт 2018 в 11:24
0

Вот код без 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;
}

0

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

2
0

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

* {
  box-sizing: border-box;
}

html, body {
  background: #ccc;
  padding: 0;
  margin: 0;
}

0

Не совсем понимаю проблему. Для 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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.