2

目标： “page-wrap”（蓝色背景）必须扩展整个页面的高度。

还要将页脚保留在页面底部。页脚不能与侧边栏/内容重叠。

问题： 在#container中添加height:100%会导致窗口调整大小时页脚重叠，并在页脚下添加由页眉引起的空白

我尝试了几十种不同的配置，但似乎无法达到我的目标。

http://jsfiddle.net/fZmut/3/

<div id="container">    
    <div id="header">header</div>
    <div id="page-wrap">
        <div id="inside">
        <div id="sidebar">
            <p>sidebar</p>
            <p>sidebar</p>
            <p>sidebar</p>
            <p>sidebar</p>
        </div>
        <div id="flow-content"> 
           <p>content</p>
           <p>content</p>
           <p>content</p>
           <p>content</p>
        </div>
        </div>
        <div id="footer">footer</div>
    </div> 
</div>

css

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
    /* height:100%; */ /* causes footer to overlap when window resized, and adds blank space under footer caused by header */
    min-height: 100%;
    position:relative;
    margin: 0px auto 10px;
    background-color: black;
}
#header{
    background-color:green;
    width:100%;
    border-bottom: 2px solid black;    
}
#page-wrap {
    background: blue;
    width: 450px;
    margin: 0px auto 10px;  
    height:100%;    
}
#page-wrap #inside {
    margin: 0px 10px 0px 10px;
    padding-top: 10px;
    padding-bottom: 20px;
}
#sidebar {
    width: 50px;
    float: left;
    padding-left: 0px;
    padding-top: 0px;
    background-color: gray;
}
#flow-content {
    background-color: yellow;
    padding-left: 50px;
    padding-top: 1px;
    padding-right: 15px;    
}
#footer {
    background: #fff;
    border: 1px solid black;
    height: 20px;
    width: 430px;
    margin: 0 10px;

    bottom: 0;
    position: absolute;   
}
4

1 回答 1

1

您可以将 100% 添加到 #container 并解决您提到的 2 个问题：

使标题绝对位置以处理额外的高度问题。（但是您需要在蓝色区域添加额外的填充以适应。

还将页脚显示为表格行及其父表格以解决重叠问题：

#header{
    background-color:green;
    width:100%;
    border-bottom: 2px solid black;   

    **position:absolute;**
}
#page-wrap {
    background: blue;
    width: 450px;
    margin: 0px auto 10px;  
    height:100%;  

    **display:table;
    padding-top:20px;**
}

#footer {
    background: #fff;
    border: 1px solid black;
    height: 20px;
    width: 430px;
    margin: 0 10px;

    **display:table-row**
}

http://jsfiddle.net/fZmut/7/

于 2013-04-17T20:04:50.353 回答