Jump to content
  • 0

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

SIC

Asked by SIC,

 Share

Question

SIC Explorer

SIC

Posted
Posted

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

Задача: Есть страница, с шапкой 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;
}

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

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept