我的页面顶部有一个高133像素的标题栏。我将我的身体设置为位置:绝对和高度:100%。
我现在还有两个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>
答案 0 :(得分:3)
将顶部栏设为绝对,以:
div#topbar {
position: absolute;
z-index: 1;
}
为您的内容和侧边栏添加包装器div,其中包含margin-top:
<style>
div.topbar-padding {
margin-top: 133px;
}
</style>
<div id="body">
<div id="sidebar">
<div class="topbar-padding">
afasdfadsfadf
</div>
</div>
<div id="content">
<div class="topbar-padding">
afasdfadsfadf
</div>
</div>
</div>
答案 1 :(得分:1)
Topbar也应该是绝对的。
div#topbar {
position:absolute;
z-index:2;
}