粘性页脚，页眉和100％的高度内容

Question

我试图有一个页眉，一个粘贴的页脚和一个内容部分，该内容部分以100％的比例跨越中间空间。 但是，我遇到了中间高度超出范围的问题。 我在下面和jsfiddles中包含了代码。 我在IE7中使用严格的HTML 4.0，并且没有更改任何一个的选项。 提前致谢！

没有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;
}

Answer 1

设置页眉和页脚的固定位置，并将主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%;
}

这是小提琴：小提琴

粘性页脚，页眉和100％的高度内容

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-09-17 14:59:46

粘性页脚，页眉和100％的高度内容

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-09-17 14:59:46

解决方案1
2 已采纳 2013-09-17 14:59:46