Растянуть div на высоту body, вычтя высоту header

vkapas · May 11, 2014

Всем привет.

Необходимо растянуть body на высоту страницы, а вложенному диву с контентом задать высоту: body минус высота header.

Если я делаю так

<html> <body>  <header></header>  <div id="#content"></div> <body></html>

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

то высота #content увеличиваеся на высоту header.

Хотя, может быть, я вообще не в ту сторону смотрю. Исходный сайт — s1a.ru; нужно растянуть контейнер #gk-main на всю высоту страницы. Сейчас же на Главной и на страницах, где мало контента, внизу по бокам появляются белые полосы.

npofopr · May 11, 2014

А зачем собственно?

Вам проще сделать обертку для header и следующего section и ее уже растягивать.

vkapas · June 11, 2014

Спасибо за совет. К сожалению, он не помог, т.к. главная проблема осталась: id="#content" (который я поместил в общий div вместе с header) по-прежнему не растягивается на всю высоту окна, а слева и справа по бокам по-прежнему появляются белые полосы (проблема воспроизводится на страницах, где контентная часть не помещается на одной странице, например, здесь).

P.S. Да, я знаю, что ответил через месяц, просто совсем не доходили руки проверить.

Yazon_Nile · June 11, 2014

http://jsfiddle.net/qAAt8/

или через цсс.

используя box-sizing: border-box + height: 100% + верхний паддинг на высоту хедера

Great Rash · June 11, 2014

http://codepen.io/GreatRash/pen/vxnKh

Zverushka · June 12, 2014

Че-то в голову пришло и вроде работает... http://jsfiddle.net/Zverushka/mn7ju/

vkapas · June 15, 2014

Спасибо за советы. К сожалению, ни один из способов не помог.

Проблема везде одна: белые полосы при прокрутке страницы вниз. Полосы появляются там, где содержимое страницы не помещается по высоте на 1 экран (по крайней мере, на 15" мониторе), например, здесь.

Switch74 · June 16, 2014

Для body min-height: 100%; и уберите height: 100%; и height: 100%!important;

не понятно, зачем вы указывали вообще два раза одно и тоже

vkapas · June 16, 2014

Спасибо, помогло :-). Лишние стили убрал — они остались в результате экспериментов.

Не подскажете ещё, как теперь растянуть контейнер под header (#gk-main) так, чтобы на страницах, где мало контента — например, на Главной, — он был растянут до конца страницы? То есть, чтобы бэкграунд body на всех страницах был только по бокам (на Главной сейчас он и снизу).

Switch74 · June 16, 2014

в вашем случае я бы переделал верстку, сделал обертку для сайта

посмотрите http://htmlforum.ru/index.php?showtopic=5870

там много тем по прижатию футтера к низу страницы и там же разные способы растягивания страницы на всю ширину окна браузера

Sign In

Растянуть div на высоту body, вычтя высоту header

Question

vkapas

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

vkapas

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Zverushka

Link to comment

Share on other sites

vkapas

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

vkapas

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information