ページの上部に、高さ 133 ピクセルのタイトル バーがあります。体を position: absolute と height: 100% に設定しました。
配置のために、下にさらに 2 つの div があります。それらを高さ 100% の相対位置に設定すると、ページの下部から 133 ピクセル余分に伸びています。トップバーを削除すると、高さは完璧ですが、トップバーは 100% から 100% + 133px を押し上げています。
<!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>
<title></title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div#god {
position: absolute;
width: 100%;
height: 100%;
}
div#topbar {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height:133px;
background-image :url(bkgnd_header_tile.jpg);
}
div#logo {
width: 187px;
height: 133px;
background-image:url('headerlogo_home.jpg');
float: left;
}
div#text {
height: 133px;
float: right;
}
div#campuses {
height: 68px;
padding-top: 10px;
color: White;
text-align: right;
}
div#title {
height: 41px;
color: White;
text-align: right;
padding-top: 14px;
}
div#body {
position: relative;
height: 100%;
}
div#sidebar {
width: 300px;
float: right;
background-color: #EFEFEF;
height: 100%;
}
div#content {
height: 100%;
overflow: hidden;
background-color: #FEFEFE;
}
span.text {
padding-left: 15px;
padding-right: 15px;
font-family: Sans-Serif;
font-size: small;
}
span.name {
padding-left: 15px;
padding-right: 15px;
font-family: Sans-Serif;
font-size: x-large;
}
</style>
</head>
<body>
<div id="god">
<div id="topbar">
<div id="logo"></div>
<div id="text">
<div id="campuses">
<span class="text">St. John's Campus</span>
<span class="text">Grenfell Campus</span>
<span class="text">Marine Institute</span>
<span class="text">Harlow Campus</span>
<span class="text">Distance Education</span>
</div>
<div id="title"><span class="name">Memorial Self Service</span></div>
</div>
</div>
<div id="body">
<div id="sidebar">
afasdfadsfadf
</div>
<div id="content">
fdsafdasdfa
</div>
</div>
</div>
</body>
</html>