带有页眉和页脚以及 100% 内容 div 的网页答案

【问题标题】：WebPage with header and footer and 100% content div带有页眉和页脚以及 100% 内容 div 的网页
【发布时间】：2013-09-20 22:05:27
【问题描述】：

我希望为 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/

【问题讨论】：

添加jsfiddle 然后期待答案:)
@Alvaro 添加了一个 jsfiddle 作为请求 :)

标签： css html height sticky-footer

【解决方案1】：

我的需求的答案如下。使用另一个 div 作为标题，绝对定位，并在主 div 中添加 padding-top 给了我想要的效果。

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_header">
            <div id="master_logodiv">
            </div>
            <div id="master_tabsdiv">
            </div>
        </div>
        <div id="master_maindiv">
            <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_header
{
    background-color:Aqua;
    position:absolute;
    height:100px;
    margin:0px;
    padding:0px;
    left:0px;
    top:0px;
}
#master_maindiv
{
    background-color:Orange;
    height:100%;
}
#master_logodiv
{
    background-color:Blue;
    height:50px;
}
#master_tabsdiv
{
    background-color:Green;
    height:50px;
}

#master_contentdiv
{
    background-color:Yellow;
    padding-top:100px;
    height:100%;
}

#master_footerdiv
{
    background-color:Purple;
    height:20px;
    position:relative;
    margin-top:-20px;
    clear:both;
}

【讨论】：

【解决方案2】：

从#master_maindiv 中删除padding-bottom：http://jsfiddle.net/zZUUW/6/

【讨论】：

问题是当我将 Height:100% 添加到 #master_contentdiv 时（该部分未在小提琴中完成）。我想要小提琴显示的内容，黄色部分填充整个中间部分。