DIV средствами CSS: вертикально максимальный, горизонтально центрированный?

Kostia.Ivashchenko · October 22, 2012

Здравствуйте, новичку нужна консультация гуру.

Для некоторых сайтов (например, чатов) крайне желательно, чтобы их контент занимал по вертикали всю высоту окна. Захотелось попробовать сделать необходимое макетирование с помощью <DIV>, в результате накропал следующий код:

HTML


<body>
<div id="mainDiv">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod tempor incididunt ut labore et dolore
	magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
	ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
	aute irure dolor in reprehenderit in voluptate velit esse cillum
	dolore eu fugiat nulla pariatur. Excepteur sint occaecat
	cupidatat non proident, sunt in culpa qui officia deserunt
	mollit anim id est laborum.
</div> <!-- id="mainDiv" -->
</body>

CSS


body {
	background: #fbf;
	margin: 0;
	padding: 0;
}

#mainDiv {
	position: fixed;

	width: 60%;
	background: #8ff;
	border-left: 1px black solid;
	border-right: 1px black solid;

	top: 0;
	bottom: 0;

	margin-left: auto;
	margin-right: auto;
}

Результат:

Указанное значение свойства

bottom: 0;

интерпретируется так, как я и ожидал - блок растягивается по вертикали, чтобы полностью заполнить окно браузера. Однако при написании кода я хотел еще и отцентрировать блок в окне, что не получилось.

Тогда решил в коде выше заменить строку

position: fixed;

на строку

position: static;

.

Результат:

Гм. Теперь блок центрирован по горизонтали, но не растягивается по вертикали, хотя изменено было значение всего одного свойства.

А теперь, собственно, вопросы к гуру:

Такое отображение слоя действительно предусмотрено спецификацией CSS, или это у меня руки кривые?
Если по спецификации слой так и должен отображаться, то получается, что только средствами CSS невозможно слой одновременно отцентрировать по горизонтали и растянуть по вертикали? Или все-таки возможно как-то извратиться и обойтись без использования JavaScript?

Заранее признателен за ответ.

npofopr · October 23, 2012

Эта тема уже 100500 раз в интернете обсуждена.

Решается от padding-bottom в много пикселей вниз, до более красивых решений и решений с js.

Kostia.Ivashchenko · October 23, 2012

Спасибо, Вы ответили на оба мои вопроса:

Да поведение слоя, описанное в моем посте, соответствует спецификации CSS.
Для того, чтобы добиться желаемого поведения слоя, придумано масса трюков, как с использованием JS, так и без него.

А что касается того, что

Эта тема уже 100500 раз в интернете обсуждена.
Решается от padding-bottom в много пикселей вниз, до более красивых решений и решений с js.

то это свидетельствует, как минимум, о двух вещах:

Не существует решения, устраивающего всех.
Каждое из обсуждений такого решения не так уж легко найти.

В общем, npofopr'у еще раз спасибо за ответ, но не мог бы кто-нибудь бросить хоть одну ссылку?

wwt · October 23, 2012

http://jsfiddle.net/g93KC/2/

можно еще с абсолютным позиционированием как то так http://jsfiddle.net/g93KC/1/

Edited October 23, 2012 by wwt

npofopr · October 23, 2012

Много браузеров/движков = много решений) imho

wwt · October 23, 2012

Много браузеров/движков = много решений) imho

много браузеров/4 основных движка если быть точным.

эм вообще то данная задача решается во всех браузерах одинаково )) Бывают нюансы, но общий принцип везде один.

Edited October 23, 2012 by wwt

Kostia.Ivashchenko · October 23, 2012

http://jsfiddle.net/g93KC/2/

Спасибо, по указаной ссылке Ваше решение действительно показывает то, чего я хотел добиться. Но.

1. Почему-то локально мне удается воспроизвести это решение только после добавления в файл стилей:

body {margin: 0;}

В противном случае сверху и снизу появляются поля, а в окне браузера - полоса прокрутки. Почему?

2. Мне совершенно непонятно, почему Ваше решение работает, только если свойство

height: 100%;

установить одновременно для тэгов <html> и <body>?

wwt · October 23, 2012

http://jsfiddle.net/g93KC/2/
Спасибо, по указаной ссылке Ваше решение действительно показывает то, чего я хотел добиться. Но.
1. Почему-то локально мне удается воспроизвести это решение только после добавления в файл стилей:
body {margin: 0;}
В противном случае сверху и снизу появляются поля, а в окне браузера - полоса прокрутки. Почему?
2. Мне совершенно непонятно, почему Ваше решение работает, только если свойство
height: 100%;
установить одновременно для тэгов <html> и <body>?

margin: 0;

Для боди http://jsfiddle.net/g93KC/3/, просто там нормализация была включена слево )) Тоесть маргин 0 был уже задан ))

По поводу 100%. Если используются относительные единицы измерения, в нашем случае это %, то размеры высчитываются относительно размеров родителя, если у родителя размеры тоже относительные то соответственно его размеры рассчитываются у его родитея и так вплоть до размеров рабочей области браузера.Если не прописать 100% для html то его высота будет auto и зависеть от контента, тоесть body примет размер такой же в зависимости от контента.

Edited October 23, 2012 by wwt

Kostia.Ivashchenko · October 23, 2012

Спасибо за предыдущий ответ, вроде все понятно (пока ).

можно еще с абсолютным позиционированием как то так http://jsfiddle.net/g93KC/1/

Спасибо. Но для чего здесь странное (на мой взгляд новичка, естественно) сочетание:

left: 50%;
margin-left: -30%;

???

Sensei · October 23, 2012

http://jsfiddle.net/sensei/NzpdX/

Kostia.Ivashchenko · October 23, 2012

http://jsfiddle.net/g93KC/2/

После некоторого размышления у меня возникло ощущение, что приведенное в этом элегантном решении форматирование вида

html, body {height: 100%;}

является чересчур, как бы это сказать, обязывающим - мало ли какие изменения сайта будут потом нужны. Поэтому переработал код к такому виду:

HTML:


<div class="div100percents">
	<div class="mainDiv">
	</div>
</div>

CSS:


body { margin: 0; }
.div100percents {
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
}
.mainDiv {
	position: static;
	width: 800px;
	min-height: 100%;
	margin: 0 auto;
}

Поставленную исходную задачу этот код выполняет. Но я с удивлением обнаружил, что при уменьшении окна браузера по ширине размер внутреннего блока остается фиксированым, но горизонтальная полоса прокрутки в браузере не появляется и часть содержимого этого блока уходит за правую границу. Вопрос - почему?

Kostia.Ivashchenko · October 23, 2012

...горизонтальная полоса прокрутки в браузере не появляется...

Вылечил. Заменой


.div100percents {
	position: fixed;
}

на


.div100percents {
	position: absolute;
}

Всем участникам обсуждения - большое спасибо!

Kostia.Ivashchenko · October 25, 2012

Вылечил.

Потом выложил онлайн: http://jsfiddle.net/Kostia_Ivashchenko/BngRm/

Потом решил усложнить задачу: добиться того, чтобы на макете были полноширинные header и footer фиксированной высоты, прилегающие к верхнему и нижнему краям окна браузера, соответственно, а между ними - центрированная область фиксированной ширины, занимающая все пространство по вертикали. Долго мучился, самое лучшее из того, что получилось, выложил здесь: http://jsfiddle.net/Kostia_Ivashchenko/HfPNZ/

Однако решение получилось мало того, что некошерным, поскольку использует форматирование таблицами, но еще и работает так, как я хочу, только в Файрфокс, в Опера и ИЕ работает по другому, а в Хром - еще по другому. Может быть кто-то из корифеев подскажет, куда в данном случае ползти?

Заранее признателен.

Kostia.Ivashchenko · October 26, 2012

Молчат гуру, не дают ответа...

wwt · October 26, 2012

Поищите на этом форуме, вопрос о прижатии футера к низу окна с растяжкой блока по высоте рассматривалось нираз ))

Kostia.Ivashchenko · October 26, 2012

Поищите на этом форуме, вопрос о прижатии футера к низу окна с растяжкой блока по высоте рассматривалось нираз ))

Ага, рассматривался, рассматривался, да так и не был решен вразумительно.

Налепил некий код, который меня не удовлетворяет до конца, но все-таки как-то работает: http://jsfiddle.net/Kostia_Ivashchenko/Bwdhn/

Sign In

DIV средствами CSS: вертикально максимальный, горизонтально центрированный?

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information