我正在为 IE 8 编写一个网页,顶部有一个徽标和标题 div,中间有一个内容部分,底部有一个粘性页脚。问题是,我无法让内容部分占用 100% 的剩余内容。代码如下。每当我将内容的高度设置为 100% 时,由于标题/徽标 div 的缘故,会有 100 像素超出。我怎样才能解决这个问题?
HTML
<%@ Master Language="C#" inherits="DenApp.master"%>
<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 id="master_maindiv">
<div id="master_logodiv">
</div>
<div id="master_tabsdiv">
</div>
<div id="master_contentdiv">
<asp:contentplaceholder ID="content" runat="server" />
</div>
</div>
<div id="master_footerdiv">
</div>
</div>
</body>
</html>
CSS
html, body
{
margin:0px;
padding:0px;
height:100%;
width:100%;
}
#master_bodywrapper
{
margin:0px;
padding:0px;
height:100%;
background-color:Black;
}
#master_maindiv
{
background-color:Orange;
padding-bottom:20px;
height:100%;
}
#master_logodiv
{
background-color:Blue;
height:50px;
}
#master_tabsdiv
{
background-color:Green;
height:50px;
}
#master_contentdiv
{
background-color:Yellow;
}
#master_footerdiv
{
background-color:Purple;
height:20px;
position:relative;
margin-top:-20px;
clear:both;
}
应要求添加小提琴:http: //jsfiddle.net/zZUUW/5/