Html 将Div和页面底部对齐，绝对定位不起作用

我想在两种不同的情况下在页面底部放置一个

DIV

，如果页面内容有足够的高度填充屏幕底部

DIV

应该粘贴到

content

DIV

的末尾，当它没有足够的高度或是空的时候，在这种情况下，底部

DIV

应贴在页面末尾

这是我的HTML和CSS（）

CSS:

HTML:

顶部
内容
福

福

福

福

福

福

福

福

福

底部

第一个问题是，您在

包装上有
位置：relative
。如果将其移除，则定位将相对于页面

但是要得到一个粘性的页脚要比这复杂一点。我建议：
它似乎有效，谢谢，如果它继续有效，我会将它标记为答案。
@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;
}​

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