html — Как растянуть блок на всю высоту страницы?
Вопрос задан
Изменён 2 года 1 месяц назад
Просмотрен 69k раза
Вопрос по CSS. Задача: есть высокий блок-контейнер, он по высоте не помещается на один экран (например, div, в котором много параграфов), надо задать фон этому блоку-контейнеру, чтобы он был закрашен полностью.
Нашел вот такое решение: задать всем блокам-родителям height: 100%;, а блоку-контейнеру задать min-height: 100%;. Вот пример:
html, body {
height: 100%;
}
div {
min-height: 100%;
background-color: red;
border: 2px solid black;
}<div> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> </div>
Не понимаю, почему это работает.
Похоже на «шаманство». min-height задает минимальную высоту. Получается, что минимальная высота содержимого дива равна 100% высоты содержимого div. Посмотрел в devtools, выяснилось, что div может быть по высоте больше, чем body и html.
- html
- css
- css3
5
Почему это работает?
Потому что div просто переполняет (вылазит за границы) body и всё. Задавая overflow: hidden; для body мы увидим, что div просто обрезается (если высота экрана небольшая).
html, body {
height: 100%;
overflow: hidden;
}
div {
min-height: 100%;
background-color: red;
border: 2px solid black;
}<div> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> </div>
Как с этим быть?
Это задавание height: 100%; блокам всех уровней вложенности довольно неудобно.
Задайте просто нужному вам блоку min-height: 100vh;, где vh — единицы высоты экрана. У body тогда будет по умолчанию height: auto; и body просто будет подстраиваться под содержимое.
6
Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:
* {
margin: 0;
padding: 0;
}
html,
body,
.wrapper {
height: 100%;
}
.content {
box-sizing: border-box;
min-height: 100%;
padding-bottom: 90px;
}
.footer {
height: 80px;
margin-top: -80px;
}
И разметка:
<div>
<div>
<p>ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй </p>
<p>ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц </p>
<p>ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу </p>
<p>ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк </p>
<p>еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее </p>
</div>
<div></div>
</div>
При этом min-height: 100% работает ТАК:
Если СОДЕРЖИМОГО МАЛО у блока
content, то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта (wrapper— это 100% от высотыbody,body— это 100% от высотыhtml, аhtml— это 100% от высотыviewport).
При этом у блока content есть нижний paddind-буфер отрицательный, а у блока блокаfooterесть отрицательныйmargin, который позволяет в случае, когда много содержимого, «наползти» на этотpadding-буфер.Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке
content), то высота определяется содержимым — содержимое растягивает.
При этом у блока content есть нижний Еще раз повторю, чтобы все запомнили — если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше — пожалуйста, если сможешь растянуть содержимым), если много — высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.
div {
display: flex;
flex-direction: row;
align-items: stretch;
}
1
Зарегистрируйтесь или войдите
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Растянуть div на всю высоту родительского div
Вопрос заданИзменён 5 лет 5 месяцев назад
Просмотрен 5k раза
Здравствуйте.
Есть три блока Div. Один родительский, второй внутри слева (для меню), второй внутри справа (для текста). Как можно растянуть правый внутренний блок (можно с левым) на всю высоту родительского блока. Сам родительский блок с фиксированной высотой не менее 1100px
Вот код:
<div> <div></div> <div></div> </div>
Вот что прописано в css:
#wrapctr {
width:80%;
min-width: 700px;
max-width: 1200px;
background:#FFF;
margin:0 auto;
min-height:1100px;
z-index:2;
}
#leftmenu {
background: #FFF;
float: left;
width: 250px;
list-style: none;
}
.rightcontent {
background: #FFF;
margin-left: 255px;
}
UPD: На одной странице выдаются фотографии 12 штук по три в ряд, и страница имеет такой вид
<div> <div></div> <div> //общий див <div> // на каждую картинку <div><img src=".
./img/1625.jpg"></div>
</div>
</div>
</div>
И если на странице фотографий ровно 12, а не меньше, это полотно идет ниже правого дива
- html
- css
- div
3
html,
body {
padding: 0px;
margin: 0px;
}
#wrapctr {
width: 80%;
min-width: 700px;
max-width: 1200px;
background: #FFF;
margin: 0 auto;
min-height: 1100px;
position: relative;
z-index: 2;
}
#leftmenu {
background: #f00;
width: 250px;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
list-style: none;
}
.rightcontent {
background: #000;
position: absolute;
height: 100%;
left: 255px;
top: 0px;
right: 0px;
bottom: 0px;
} <div> <div></div> <div></div> </div>
3
html,
body {
padding: 0px;
margin: 0px;
}
#wrapctr {
width: 80%;
min-width: 700px;
max-width: 1200px;
background: #FFF;
margin: 0 auto;
min-height: 1100px;
height: 0px; /* просто чтобы был */
}
#leftmenu {
background: #f00;
width: 250px;
height: 100%;
float: left;
}
. rightcontent {
background: #000;
height: 100%;
}
<div> <div></div> <div></div> </div>
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
css — Для расширения div на всю высоту
спросил
Изменено 25 дней назад
Просмотрено 309 тысяч раз
Есть ли метод, который я могу использовать для расширения div до полной высоты? У меня тоже есть липкий нижний колонтитул.
Вот веб-страница: Веб-сайт удален . Средний бит, о котором я говорю, — это белый div, midcontent, который имеет значения CSS:
.midcontent{
ширина:85%;
поле:0 авто;
отступ: 10 пикселей 20 пикселей;
заполнение сверху: 0;
цвет фона:#FFF;
переполнение: скрыто;
минимальная высота: 100%;
максимальная ширина: 968 пикселей;
высота:100%;
}
Так что да, очевидно height:100% не сработало. Кроме того, ВСЕ родительские контейнеры имеют заданную высоту.
Вот общая структура
<тело>
<дел>
<дел>
<дел>
<дел>
webmasterworld.com/forum83/200.htm
Теперь есть единица измерения 
е. 100vh. Вычитая высоту, мы обеспечим отсутствие переполнения и всегда будем реагировать (при условии, что мы работаем с rem вместо px).
