0

我想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>
4

1 回答 1

1

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

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

于 2012-11-18T14:58:58.487 回答