Мне нужна веб-страница, которая содержит 3 части: верхний колонтитул в верхней части страницы, нижний колонтитул (оба из которых имеют определенную высоту в пикселях) и основную часть страницы, которая должна быть div или таблицей ячейка с соответствующим атрибутом высоты, чтобы занять все доступное пространство между ними. Я хочу, чтобы страница занимала 100% высоты окна браузера, стараясь избегать полос прокрутки. У меня есть следующие проблемы:
ИСПОЛЬЗОВАНИЕ DIVs
a) Если я установлю высоту maindiv на 100%, страница переполнится, и я получу вертикальную полосу прокрутки. (высота maindiv установлена на 100% окна браузера)
<!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>
</head>
<style type="text/css">
<!--
body, html{
height: 100%;
max-height:100%;
width: 100%;
margin:0;
padding:0;
}
div{padding:0;margin:0;}
#containerdiv{height:100%;width:100%;background-color:#FF9;border:0;}
#headerdiv{height:150px;width:100%;background-color:#0F0;border:0;}
#footerdiv{height:50px;width:100%;background-color:#00F;border:0; }
#maindiv{
background-color:#F00;
height:100%;
}
div{border:#000 medium solid;border:0;}
</style>
<body>
<div id="containerdiv">
<div id="headerdiv">headerdiv</div>
<div id="maindiv">maindiv</div>
<div id="footerdiv">footerdiv</div>
</div>
</body>
</html>
b) Если я установлю высоту maindiv на auto, высота maindiv будет зависеть от его содержимого, а это не то, что я хочу.
ИСПОЛЬЗОВАНИЕ таблиц
a) Если я установил высоту основной ячейки на 100%, она отлично работает с Firefox, но в Internet Explorer 8 я получаю вертикальную полосу прокрутки (вы можете использовать следующий блок кода, используя th style = "height: 100%"
вместо "авто", чтобы увидеть это.)
b) Если я установил основную ячейку на auto, она, кажется, работает как в IE, так и в FF, но тогда у меня возникает проблема, заключающаяся в том, что все, что я помещаю в maincell (table или div), не может получить полную высоту maincell в IE.
<!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>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063" cellpadding="0" cellspacing="0" border="0">
<tr><th style="height:150px;background-color:#FF0"></th></tr>
<tr>
<th style="height:auto"><table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:auto">nested cell</th></tr></table>
</th>
</tr>
<tr><th style="height:50px;background-color:#FF0"></th></tr>
</table>
</body>
</html>
</html>
Есть идеи? Может быть, есть более простой способ определить размер основной части страницы в px с помощью javascript? (мои навыки работы с JavaScript довольно плохие, поэтому любая помощь в этом приветствуется!)