Вертикальное позиционирование контента

Crawler · April 30, 2012

Доброго времени суток!)

Вот пример верстки - http://jsfiddle.net/FeXaC/

Необходимо привязать футер к низу страницы (что реализовано), и при этом выровнять блок с контентом (фиксированного размера) по центру страницы.

Если в css в #wrapper убрать

height: auto !important;

то выравнивание работает, но при этом футер начинает наезжать на контент при уменьшении размера окна.

Подскажите пожалуйста, как можно решить сложившуюся проблему. Чтобы и контент по центру был, и футер не наезжал на него.

Желательно без использования js и представления div таблицей. :rolleyes:

mrnobody · April 30, 2012

Блин, чего-то я не пойму, удалил это свойство height: auto !important;, но ничего не наезжает друг на друга при уменьшении страницы.

Edited April 30, 2012 by mrnobody

Crawler · May 1, 2012

Блин, чего-то я не пойму, удалил это свойство height: auto !important;, но ничего не наезжает друг на друга при уменьшении страницы.

Странно, у меня проблема осталась. Смотрел в последних версиях хрома, фф - тоже самое. Без этого свойства происходит нормальное центрирование, но наезжает футер; с ним все наоборот - центрирования нет, футер упирается в контент при уменьшении окна.

p.s. а Вы пробовали запустить или сделать апдейт после изменения в коде?) =)

mrnobody · May 1, 2012

Ну вот так получилось - http://jsfiddle.net/FYUSS/2/ . Не знаю, можно было удалять то что я удалил?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
    margin: 0;
}

html, body {
    height: 100%;
    background: #ccc;
}

#wrapper {
    min-height: 100%;
    margin: 0 auto;
    background: #777;
}

header {
    background: pink;
    height: 50px;
}

footer {
    background: yellow;
    height: 50px;
}

section {
    position: relative;
    clear: left;
    width: 300px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #666;
}?
</style>
</head>
<body>
	<div id="wrapper">
		<header>header</header>
		<section>content 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.</section>
	</div>
	<footer>footer</footer>?
</body>
</html>

Но вроде проблема была в высоте обёртки height: 100% и/или отрицательном нижнем маржине: margin: 0 auto -50px; (ааа, это вы из-за ДИВа-толкателя задали отрицательный маржин).

Edited May 1, 2012 by mrnobody

Crawler · May 1, 2012

Да проблема в высоте обертки. Но без нее контент не выравнивается как следует.

Ваш вариант также подходит, но только как бы теперь выровнять блок section по вертикали по центру страницы?

Указанным мною способом сделать не получится, т.к. родитель section не имеет высоты в 100%.

mrnobody · May 1, 2012

Нашел статью на Хабре, не знаю поможет Вам или нет - http://habrahabr.ru/post/73113/

Sign In

Вертикальное позиционирование контента

Question

Crawler

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

Crawler

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Crawler

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information