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

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

但要获得一个粘性页脚比这复杂一点。我建议：http://ryanfait.com/sticky-footer/

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

1 个答案: