Есть такой глюк на странице, html
и body
не растягиваются на всю высоту браузера из-за этого все внутренние элементы выходят за ее пределы. Как это исправить?
Задал
html, body {
height: 100%;
}
не помогло.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВсе растягивается:
* {
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>
float
в данном случае стоит применить для всей обертки (body')
overflow:hidden` или clearfix применять. Бывает теряется закрывающий тег и все тоже ломается. Ситуации разные бывают как и баги)
Вот код без 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;
}
Не фиксируй высоту явно, всегда min-height задавай. А то если дочерние компоненты превысят высоту, начнут выпадать из контейнера.
можно и так сделать, а содержимое уже высоту определит. Залей на гитхаб может, и ссылку дай
* {
box-sizing: border-box;
}
html, body {
background: #ccc;
padding: 0;
margin: 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>
html, body {height: 100vh}
min-height: 100vh