我正在尝试拥有一个页眉、一个粘性页脚和一个 100% 跨越中间空间的内容部分。但是，我遇到了中间高度过大的问题。我在下面包含了代码和 jsfiddles。我在 IE7 中使用 HTML 4.0 strict 并且没有更改其中任何一个的选项。 提前致谢!
没有 100% 高度的 jsfiddle:http://jsfiddle.net/hWRnZ/
100% 高度的 jsfiddle:http://jsfiddle.net/hWRnZ/1/
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head runat="server">
<title>DenApp</title>
<script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script>
<link rel="Stylesheet" href="./css/master.css" />
</head>
<body>
<div id="master_bodywrapper_div">
<div id="master_header_div">
<div id="master_logo_div">
<div id="master_logo_div_image">
<img id="master_logo_img" alt="logo" src="./images/DenApp_Logo.png" />
</div>
<div id="master_welcome_div">
<div id="master_welcome_div_inner">
Welcome SO-AND-SO!
</div>
</div>
</div>
<div id="master_tabs_div">
<div id="master_tabs_div_home" class="master_tabs">
Home
</div>
<div id="master_tabs_div_masterlist" class="master_tabs">
Full List
</div>
<div id="master_tabs_div_myworklists" class="master_tabs">
My Worklists
</div>
<div id="master_tabs_div_detail" class="master_tabs">
Detail
</div>
<div id="master_tabs_div_reporting" class="master_tabs">
Reporting
</div>
<div id="master_tabs_div_assignment" class="master_tabs">
Assignment
</div>
<div id="master_tabs_div_admin" class="master_tabs">
Admin
</div>
</div>
</div>
<div id="master_main_div">
<div id="master_content_div">
<div id="master_content_div_inner">
Hello World!
</div>
</div>
</div>
<div id="master_footer_div">
<div id="master_footer_div_
</div>
</div>
</body>
</html>
CSS
/*Main Styles*/
html, body
{
margin:0px;
padding:0px;
height:100%;
width:100%;
}
#master_bodywrapper_div
{
margin:0px;
padding:0px;
height:100%;
}
/*Header Styles*/
#master_header_div
{
position:absolute;
height:72px;
margin:0px;
padding:0px 0px 0px 0px;
left:0px;
top:0px;
width:100%;
}
#master_main_div
{
height:100%;
width:100%;
}
#master_logo_div
{
height:50px;
padding:0px 5px 0px 5px;
margin:0px;
}
#master_logo_div_image
{
padding:0px;
margin:0px;
position:relative;
float:left;
}
#master_logo_img
{
padding:0px;
margin:0px;
height:50px;
position:relative;
top:9px;
}
#master_welcome_div
{
padding:0px;
margin:0px;
position:relative;
float:right;
height:50px;
width:50%;
}
#master_welcome_div_inner
{
padding:0px;
margin:0px;
position:absolute;
bottom:0px;
right:0px;
}
#master_tabs_div
{
clear:both;
padding:2px 0px 0px 0px;
margin:0px;
height:22px;
}
.master_tabs
{
margin:0px 1px 0px 0px;
padding:1px 3px 1px 3px;
height:25px;
display:inline;
border:2px solid Black;
font-weight:bold;
background-color:#009799;
background-image:url(../images/blue_gradient_bottom.png);
background-position:bottom;
background-repeat:repeat-x;
}
.master_tabs:hover
{
background-image:url(../images/blue_gradient_top.png);
background-position:top;
cursor:pointer;
}
/*Content Styles*/
#master_content_div
{
padding-top:78px;
height:100%;
}
#master_content_div_inner
{
background-color:Blue;
height:100%;
}
/*Footer Styles*/
#master_footer_div
{
background-color:Purple;
height:20px;
position:relative;
margin-top:-20px;
clear:both;
}
最佳答案
为页眉和页脚提供固定位置，并将主 div 的顶部和底部边距分别设置为页眉和页脚的高度。
/*Main Styles*/
html, body
{
margin:0px;
padding:0px;
width:100%;
height:100%;
overflow:hidden;
}
/*Header Styles*/
#master_header_div
{
background-color:Purple;
height:72px;
display:block;
width:100%;
top:0px;
}
#master_main_div
{
overflow:hidden;
background-color:Red;
width:100%;
margin-top:72px;
margin-bottom:20px;
display:block;
height:100%;
}
/*Footer Styles*/
#master_footer_div
{
background-color:Purple;
height:20px;
position:fixed;
bottom: 0;
display:block;
width:100%;
}
这是 fiddle :fiddle
关于css - 粘性页脚、页眉和 100% 高度内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18853096/