html - 将 Div 对齐到页面底部，绝对定位不起作用

Question

我想在两种不同的情况下在页面底部放置一个 DIV，如果页面内容有足够的高度来填充屏幕底部 DIV 应该坚持到底content DIV，当它的高度不够或为空时，在这种情况下，底部 DIV 应该贴在页面的末尾。

这是我的 HTML 和 CSS ( http://jsfiddle.net/maysamsh/eWhvs/embedded/result/ )

CSS:

@charset "UTF-8";
*{
    padding:0;
    margin:0;
    color:#FFF;
}
body {
    background-image: url(http://ashraafi.com/img/bgpattern.png);
    background-repeat: repeat;
}
#wrapper{
    min-width:900px;
    width: 100%;
    background-color:#CCC;
    position:relative;
}
#top{
    width:inherit;
    height:40px;
    background-color:#000;
    position:relative;
}
#content{
    width:inherit;
    background-color:#36C;
    position:relative;
}
#bottom{
   position:absolute;
   bottom:0;   
   left:0;
   background-color:#42210b;
   width: inherit;
   height: 35px;
}​

HTML:

<div id="wrapper">
    <div id="top">
        top
    </div>
    <div id="content">
        content
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
    </div>
    <div id="bottom">
        bottom
    </div>
<div>

Answer 1

第一个问题是您在 #wrapper 上有 position:relative。如果删除它，则定位将相对于页面。

但是要获得粘性页脚要比这复杂一点。我会推荐:http://ryanfait.com/sticky-footer/