Резиновая страница. Вертикальное выравнивание.

SIC · May 26, 2008

Посмотрел все темы на форуме. Наш?л приблизительно похожие, но они мне не подходят. Сам мучался целый день, но проблему не решил...

Задача: Есть страница, с шапкой head (красная) фиксированной ширины и высоты, меню left_menu (светло-голубое), главной страницей main_page (синяя), и нижним футером underline (зел?ный) высота и ширина фиксированны. Необходимо чтобы независимо от кол-ва текста на главной странице футер всегда был в нижней части экрана. Т.е. страница растягивалась вертикально. При большом кол-ве текста, естественно появляется прокрутка. Да это просто, скажите вы =). Задать футеру абсолютное позиционирование и прижать его вниз. Ан нет, задача усложняется тем, что вокруг всей страницы ид?т рамка шириной 20px и она должна включатся в общий размер страницы. Если прижать футер вниз, то он е? перекрывает, а если задать абсолютное позиционирование и контейнеру, то вс? ок, но страница не центруется горизонтально, а уходит в верхний левый угол ((. Вся страница выровнена горизонтально посередине экрана. Вот упрощ?нные коды html и css.

Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="stylesheets/style_maket.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=win-1251">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<div id=podlojka>
	<div id=container>
		<div id=head></div>
		<div id=left_menu>Здесь меню</div>
		<div id=main_page>Здесь должен быть текст</div>
		<div style="clear: left"></div>
		<div id=underline>Вот этот див нада опустить до низа страницы даже если текста мало</div>
		<div style="clear: left"></div>
	</div>
</div>
</body>
</html>

Css:

body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	background-color: #FFFFFF;
}

#podlojka {
	margin: 0px auto;
	height: 100%;
	width: 1000px;
	background-color: #003a6e;
	padding: 20px;
}

#container {
	width: 1000px;
	margin-left: 0px auto;
	background-color: #FFFFFF;
}

#head {
	width: 999px;
	height: 228px;
	background-color: #FF0000;
}

#left_menu {
	width: 322px;
	height: 200px;
	float: left;
	background-color: #e0eef7;
}

#main_page {
	padding: 20px;
	padding-top: 40px;
	width: 637px;
	background-color: #0000FF;
	float: left;
}

#underline {
	height: 60px;
	background-color: #00FF00;
}

Кто знает как такое реализовать напишите плз.

Dimitry Wolotko · May 26, 2008

mmm Проблемы с версткой

Scrum · May 26, 2008

вот ведь как бывает то

margin-left: 0px auto;

SIC · May 27, 2008

ыы )) торопился сделать макет, чтобы выложить здесь. Не все копипасты исправил (, следует читать margin вместо margin-left...

Sign In

Резиновая страница. Вертикальное выравнивание.

Question

SIC

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

SIC

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information