Как растянуть пустой div по высоте экрана?

Question

[lavezzi1]

Вопрос исжеван на 100 рядов, но столкнувшись с проблемой погуглив внятного ответа не нашел.

Нужно чтобы былок был растянут на всю высоту даже если контента мало.

Пробовал следующее:

html, body, .content{
height:100%;
}

Не то - потому что блок получается слишком высокий и появляется прокрутка. Конечно нужен отзывчивое решение, не фиксированное.

Спасибо.

Answer 1

[A K]

Тыщща раз уже

Comments

[lavezzi1]

Хорошо. Спасибо. Мой вариант тоже рабочий, просто я понял в чем проблема была - почему скрол появлялся. У меня были указаны margin 40px; тогда такой вопрос, как можно сделать, чтобы с margin значениями не было скролла? Чтобы значение height уменьшалось?

[A K]

lavezzi1: покажите где у Вас скролл?

[lavezzi1]

storage2.static.itmages.com/i/15/0227/h_1425051031...
#wrapper {
min-height: 100%;
margin: 0 auto;
background-color: white;
margin-top: 100px;
margin-right: 20px;
margin-left: 20px;
margin-bottom: 40px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-khtml-border-radius: 3px;
}

[A K]

lavezzi1: используйте jsfiddle и padding

[lavezzi1]

Symphony: c padding тот же самый результат что и с margin.

[A K]

lavezzi1: используйте jsfiddle
Написано 26 минут назад

[A K]

lavezzi1: понимаете, что я не вижу того что вы

[lavezzi1]

Symphony: jsfiddle.net/nup76m89 пожалуйста.

[A K]

lavezzi1: jsfiddle.net/Symphony/nup76m89/1

[lavezzi1]

Symphony: то ли вы не поняли, что мне нужно, то ли это не работает :)

[lavezzi1]

И почему когда я добавил блок хедер то padding-bottom не работает?

[A K]

lavezzi1: используйте jsfiddle
Написано 26 минут назад
Написано 53 минуты назад

[lavezzi1]

Symphony: jsfiddle.net/stz7Lkug вот пожалуйста. Почему padding-bottom не работает?

[A K]

lavezzi1: jsfiddle.net/Symphony/stz7Lkug/1

[lavezzi1]

Symphony: Благодарю! Помогли очень. А почему в моем варианте педденг снизу не работал? Мне необходимо знать, чтобы в дальнейшем не делать подобных ошибок.

[A K]

lavezzi1: надо обернуть макет в обертку: да простит меня какой-то гуманитарий за тафтологию

Answer 2

[zdiii]

.content {
height: 100vh; //высота экрана
}

Comments

[Vadim Rublev]

Конечно так не работает. Иначе бы этот вопрос 100 раз не задали.

Answer 3

[Ilya Korablev]

div{
 height: 100%;
}

Смотрите, чтобы у вас у родительских элементов тоже было 100%.

Answer 4

[Александр Бубликов]

тоже столкнулся с такой проблемой, делается всё очень просто, в css есть такой параметр "min-block-size:" он меня и выручил.