Question

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

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

问题： 添加高度：100％到#container会在窗口调整大小时导致页脚重叠，并在页眉下添加页脚下的空白

我尝试过几十种不同的配置，但似乎无法实现我的目标。

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

Answer 1

您可以向#container添加100％并解决您提到的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/

在DIV中DIV 100％，保持页脚粘性

1 个答案: