0

我弄乱了我的设计，它似乎不起作用。

http://jsfiddle.net/eTG4K/33/

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
</div>
<div id="footer" > a</div>

​</p> 

body,html
{
 height: 100%;
background-color: #2c2c28;   
}
#header
{
 background-color:red;
    height:45px;
}
#footer
{
    height:45px;
    background-color:blue;

}
#wrapper
{
 height:100%; 
margin-bottom:-45px;   

}
#viewer
{
height:100%;
background-color:yellow;   overflow-y: hidden;  
}
#body
{
    background-color:pink;
 height:100%;   
    overflow-y: hidden;
}
#fader
{
 height:20px;   
}​

黄色的 id=body 比页面向下延伸。我希望它停在页脚。

4

4 回答 4

1

我相信您正在寻找粘性页脚效果，您必须在包装器中有一个与页脚高度相同的元素才能向下推以将其保持在底部。您还必须在包装器的 css 中设置一些高度属性。

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
    <div class="push"></div>
</div>
<div id="footer" > a</div>

.push{
    height:45px;
}
#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom:-45px;      
}

http://jsfiddle.net/eTG4K/41/

编辑：

你的问题是你试图给出#body100% 的高度，因为它的所有祖先都有 100% 的高度，#body所以会有窗口的高度，但是#wrapper有其他占用空间的孩子，这会导致它溢出。您可以使用边距来解决此问题，但我会考虑重新设计。

#wrapper
{
   margin-bottom:-45px;
}
#body
{
   margin-top:-65px;   
}
#viewer
{
    margin-top:65px;   
}
/* add z-index to #fader and #header so they wont be covered by #body and #viewer */
#fader
{
    position:relative;
    z-index:999;
}​
#header
{
    position:relative;
    z-index:999;
}

http://jsfiddle.net/eTG4K/68/

于 2012-10-19T05:51:40.413 回答
0

......现场演示......................

嗨，现在你可以fixed position像这样习惯了

#footer {
    background-color: blue;
    bottom: 0;
    height: 45px;
    left: 0;
    position: fixed;
    right: 0;
}

现场演示

于 2012-10-19T05:53:25.903 回答
0

Put your footer inside your wrapper like so: 

<body>    
    <div id="wrapper">
        <div id="header"></div>
        <div id="fader"></div>
        <div id="body">
            <div id="viewer"></div>         
        </div>
        <div id="footer" ></div>
    </div> 
</body>
</html>​

This prevents the body from extending past the footer, since the wrapper and the body are set to 100% height.

于 2012-10-19T05:44:10.660 回答
0

jsfiddle

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
    <div id="footer" > a</div>
</div>

​</p>

于 2012-10-19T05:46:49.273 回答