помогите правильно расстянуть сайт по высоте

alsec · April 7, 2009

доброго времени суток.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>



<link href="ieonly.css" rel="stylesheet" type="text/css" />


</head>
<body>
	<div id="header"><!--шапка-->
		<div id="hleft">
			<img src="img/slog.gif" alt="slog" /><!--слоган, робот в фоне-->
		</div>
		<div id="hright">
			<div id="logo"><!--логотип-->
				<a href="#"><img src="img/logo1.gif" alt="Stans"/></a>
			</div>
			<div id="home"><!--иконки быстрого доступа-->
				<a href="#"><img src="img/home.jpg" alt="home"/></a>
				<a href="#"><img src="img/mail.jpg" alt="mail"/></a>
				<a href="#"><img src="img/map.jpg" alt="map"/></a>
			</div>
		</div>
	</div><!--шапка окончена-->
	<div id="menuga"><!--блок меню и поиска-->
		<table>
			<tr>
				<td id="h2left"><!--вставка скруглённого угла слева-->
				</td>
				<td id="h2center"><!--ячейка с содержимым-->
					<div id="menu"><!--блок меню-->
						<table>
							<tr>
								<td class="hed1"><!--маккер в фоне ячейки-->
									<a href="">О предстовительстве</a>
								</td>
								<td class="hed1">
									<a href="">Учёт договоров</a>
								</td>
								<td class="hed1">
									<a href="">Учёт оргтехники</a>
								</td>
							</tr>
						</table>
						<table>
							<tr>
								<td class="hed1">
									<a href="">Учебный отдел</a>
								</td>
								<td class="hed1">
									<a href="">Цены</a>
								</td>
								<td class="hed1">
									<a href="">Контакты</a>
								</td>
							</tr>
						</table>
					</div>
					<div id="serch"><!--блок поиска-->
						<div id="entr"><!--ввод-->
							<a href=""><img src="img/entr.jpg" alt="" /></a>
						</div>
						<div class="dialog-round">
							<b class="d1"> </b><b class="d2"> </b><b class="d3"> </b>
								<div>
									Поиск
								</div>
							<b class="d3"> </b><b class="d2"> </b><b class="d1"> </b>
						</div>

					</div>
				</td><!--конец ячейки с содержимым-->
				<td id="h2right"><!--вставка скруглённого угла справа-->
				</td>
			</tr>
		</table>
	</div><!--блок меню и поиска окончен-->
	<div id="content"><!--блок контента-->
		<table>
			<tr>
				<td id="conleft"><!--вставка скруглённого нижнего угла слева-->
				</td>
				<td id="concenter"><!--ячейка с содержимым-->
					<div id="privet"><!--приветствие-->
						<h2>Приветствуем вас на сайте ООО «Станс»!</h2>
						<p>Со времени представительства в Украине (с конца 2007 г.) мы смогли предоставить программное обеспечение десяткам украинских компаний. 
С отзывами  клиентов вы можете <a>ознакомиться здесь</a>. Предлагаем украинскому бизнесу следующие автоматизированные системы:</p>
					</div>
					<div id="raz"><!--блок с колонками-->
						<table id="stolb"><!--таблица для удобства разбивки на колонки-->
							<tr>
								<td class="st"><!--левая колонка-->
									<div id="st1"><h3>АС "УЧЁТ ДОГОВОРОВ"</h3></div>
									<p>программа  “Учёт договоров” ориентирована на учёт всех заключаемых  договоров  организации с  посредниками
									и  предназначена для облегчения “жизни”  бухгалтеров,  юрисконсультов, сотрудников ПЭО,  технических 
									директоров и других сотрудников, имеющих отношение  к заключению  и  отслеживанию сроков договоров.</p>
								</td>
								<td class="st"><!--центральная колонка-->
									<div id="st2"><h3>АС "КОРУС"</h3></div>
									<p>АС “КОРУС” (компьютеры,  оргтехника,  расходные материалы - учёт  и сопровождение) ориентирована на учёт,
									имеющегося,  в  какой-либо организации вычислительного  оборудования    и  техники   Данная  программа 
									предназначена для решения широкого круга разнообразных  задач,  связанных с  учётом компьютеров  и 
									оргтехники  и  расчётом тех или иных параметров по ним.</p>
								</td>
								<td class="st"><!--правая колонка-->
									<div id="st3"><h3>АС "УЧЕБНЫЙ ОТДЕЛ"</h3></div>
									<p>АС “Учебный отдел” ориентирован  на  постановку учёта успеваемости студентов, обучающихс  я в учебных
									заведениях.  Данная программа  может  применяться  для автоматизации  деятельности  работников приёмной комиссии,
									деканатов,  отдела  кадров,военно-учётного стола учебных заведений.</p>
								</td>
							</tr>
						</table>
					</div>
				</td><!--блок с калонками окончен-->
				<td id="conright"><!--вставка скруглённого нижнего угла справа-->
				</td>
			</tr>
		</table>
	</div><!--блок контента окончена-->
	<div id="footer"><!--блок футера-->
		<p>2009, Все права защищены. ООО "Станс"</p>
	</div>
</body>
</html>

вот css

* {
	margin: 0;
	padding: 0;
}

body {
	font: normal 10pt Arial, Helvetica, sans-serif;
	color: #000000;
	min-width: 950px;



	background: #fff;

	border-right : 5px solid #cacaca;
	border-left : 5px solid #cacaca;
}
h2{
	font-size: 20pt;
	margin-bottom: 5px;
}
h2, p{
	color: #7f7f7f;
}
h3{
	color: #fff;
	margin-bottom: 10px;
	text-align: center;
	font : bold 12px Arial, Helvetica, sans-serif;
	height: 21px;
	padding-top: 4px;
}
table{
	border-collapse: collapse;
	width: 100%;
}
a {
	color: #618f25;
	text-decoration: underline;
}
img{
	border: none;
}
p{
	font-weight: 500;
}
/* Header */

#header {
	width: 100%;
	height: 294px;
	background: url(img/head.jpg) repeat-x;
}

#hleft{
	float: left;
	width: 341px;
	height: 294px;
	background:  url(img/robot.jpg) no-repeat;
}
#hleft img{
	margin: 131px 0 0 197px
}
#hright {
	float: right;
	width: 142px;
	margin-right: 50px;
	margin-top: 40px;
}
#logo{
	width: 142px;
	height: 96px;
}
#home {
	margin-top: 10px;
	height: 15px;
	width: 142px;
	text-align: center;
}
#home a{
	margin: 0 8px;
}


#h2left{
	width: 15px;
	background: url(img/ugol_lv.jpg) no-repeat top;
}
#h2right{
	width: 15px;
	background: url(img/ugol_rv.jpg) no-repeat top;
}
#h2center{
	width: auto;
}
#menu{
	width: 720px;
	float: left;
	margin-top: 15px;
}
#menu a{
	color: #292c6f;
	font-weight: bolder;
}
#menu table{
	margin: 15px 0 0 30px;
}
.hed1{
	width: 235px;
	background: url(img/marker.jpg) no-repeat left;
	padding: 0 0 0 15px;
}
/* Menu */



#entr{
	float: left;
	width: 17px;
	height: 45px;
	background: url(img/entr.png) no-repeat;
	margin-left: 10px;
	margin-top: 25px;
}



.dialog-round{
	 float: left;
	 width: 180px; 
	height: 28px;
	margin-top: 35px;
}
.d1, .d2, .d3 { 
    display: block; /* ??????? ??????? */
    font-size: 0; /* ?????? ?????? */
    line-height: 1px; /* ??? ???????? IE6 */
    height: 1px; /* ?????? ????? ? ???? ?????? */
   }
   .d2, .d3, .dialog-round div {
    border-left: 1px solid #acacac; /* ??????? ????? */
    border-right: 1px solid #acacac; /* ??????? ?????? */
   }
   .d1 { margin: 0 4px; background: #acacac; }
   .d2 { margin: 0 2px; border-width: 2px; }
   .d3 { margin: 0 1px; height: 2px; }
   .dialog-round div {
    padding: 5px; /* ??????? ?? ??????????? ? ????????? */
   }
#content{

}
#conleft{
	width: 15px;
	background: url(img/ugol_ln.jpg) no-repeat bottom;
}
#conright{
	width: 15px;
	background: url(img/ugol_rn.jpg) no-repeat bottom;
}
#concenter{
	padding-top: 70px;
	width: auto;
	height: 100%;
}
#privet{
	/*width: 100%;*/
	padding: 0 20px;
	text-align: justify;
}

#raz{
	margin: 10px 0 70px 0;
}
#raz p{
	text-align: justify;
	color: #acacac;
}
.st{
	width: 33%;
	padding: 15px;
}
#st1 {
	background: url(img/left.jpg) no-repeat top center;
}
#st2{
	background: url(img/center.jpg) no-repeat top center;
	margin-top: 15px;
}
#st3{
	background: url(img/right.jpg) no-repeat top center;
}
#footer{
	text-align: center;
	background: url(img/pol.jpg) repeat-x;
	height: 22px;
	padding-top: 3px;
}

Searcher · April 7, 2009

читаем тут: www.zakharov.ms/footer/

Clayton · April 7, 2009

Хорошая статейка) Пригодится =)

Sign In

помогите правильно расстянуть сайт по высоте

Question

alsec

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Clayton

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information