1

我试图有一个页眉、一个粘性页脚和一个以 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;
}
4

1 回答 1

2

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

这是小提琴：小提琴

于 2013-09-17T14:59:46.943 回答