Макет должен занимать всю высоту окна браузера, независимо от объема информации

tolik89u · August 19, 2008

Здесь написано: «

С помощью таблицы можно добиться эффекта, что нижняя часть страницы (?подвал?) выравнивается по нижнему краю окна браузера. Это имеет смысл в том случае, если объема данных не хватает для увеличения высоты документа. В противном случае часть страницы будет ?висеть? в середине окна. Естественно, для документа достаточного объема его отображение происходит как обычно

», — но не написано, как именно это сделать. Подскажите, пожалуйста!

Azadi · August 20, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
	padding:0;
	margin:0;
}
HTML,BODY {
	height:100%;
}
.wrap {
	height:100%;
	width:100%;
	font:100.1%/1.5 Georgia, "Times New Roman", Times, serif;
}
.wrap TD {
	vertical-align:top;
	width:100%;
}
.header {
	background:#fef;
}
.content {
	background:#eef;
	text-align:left;
}
.footer {
	height:100px;
	background:#ffe;
}
H1,H2,H3 {
	text-align:center;
	margin-bottom:2em;
}
P {
	margin:0 2em 1em;
}
</style>
</head>
<body>
<table class="wrap" border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header">
			<h1>Шапка</h1>
	   	</td>
	</tr>
	<tr>
		<td class="content">
			<h2>Контент</h2>
			<p>К.К.Гедройцем было показано, что возмущение плотности перемещает дренаж одинаково по всем направлениям. В случае смены водного режима водопотребление вызывает гумус, вне зависимости от предсказаний теоретической модели явления. Парарендзина, согласно традиционным представлениям, охлаждает ореховатый карбонат кальция, вне зависимости от предсказаний теоретической модели явления. В связи с этим нужно подчеркнуть, что эвапотранспирация устойчиво восстанавливает копролит, что дает возможность использования данной методики как универсальной. С учетом всех вышеизложенных обстоятельств, можно считать допустимым, что исследование охлаждает шурф одинаково по всем направлениям. Водопотребление перемещает уровень грунтовых вод, однозначно свидетельствуя о неустойчивости процесса в целом.</p>
			<p>Чернозём нейтрализует подпахотный подбур даже в том случае, если непосредственное наблюдение этого явления затруднительно. В связи с этим нужно подчеркнуть, что катена притягивает процесс только в отсутствие тепло- и массообмена с окружающей средой. Плотность твёрдой фазы, в первом приближении, перемещает уровень грунтовых вод как при нагреве, так и при охлаждении. Стяжение, как следует из полевых и лабораторных наблюдений, вызывает горизонт, все дальнейшее далеко выходит за рамки текущего исследования и не будет здесь рассматриваться. Растрескивание двумерно окисляет вязкий песок одинаково по всем направлениям. Вскипание с HCl поступательно приводит к появлению непромывной фрактал при любом их взаимном расположении.</p>
		</td>
	</tr>
	<tr>
		<td class="footer">
			<h3>Подвал</h3>
		</td>
	</tr>
</table>
</body>
</html>

Это просто набросок. Еще можете посмотреть на страничку Яндекса.

tolik89u · August 20, 2008

Не, я только начинающий, мне сложно понять такой код. Кстати, без стилей это возможно сделать? Чтобы было видно, что это только за счёт таблицы.

vvsh · August 20, 2008

Можно стили занести в отдельный файл, а потом в head указать:

<link type="text/css" rel="StyleSheet" href="файл стилей">

Edited August 20, 2008 by vvsh

Vladiger · August 20, 2008

Кстати, без стилей это возможно сделать? Чтобы было видно, что это только за счёт таблицы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Макет</title>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td height="120" bgcolor="#B9C3CE" align="center"><h1>HEADER</h1></td>
	</tr>
	<tr>
		<td align="center"><h1>CONTENT</h1></td>
	</tr>
	<tr>
		<td height="50" bgcolor="#B9C3CE" align="center"><h1>FOOTER</h1></td>
	</tr>
</table>
</body>
</html>

klierik · August 20, 2008

а

html, body {height: 100%;}

случайно не забыли?

хотя может это работает в 4.01

tolik89u · August 20, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
…
</html>

Спасибо! Теперь ясно и понятно. Как белый день.

Sign In

Макет должен занимать всю высоту окна браузера, независимо от объема информации

Question

tolik89u

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Azadi

Link to comment

Share on other sites

tolik89u

Link to comment

Share on other sites

vvsh

Link to comment

Share on other sites

Vladiger

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

tolik89u

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information