css布局:如何使底部始终在文档末尾

来源：互联网发布：淘宝ifashion假货多吗编辑：程序博客网时间：2024/05/17 03:08

之前做了个项目，需要使页面的footer满足，即使页面不足一页也能正常显示在底部，当然这不是单单说让footer显示在底部，如果是这样，直接就用position：fixed就能实现。

问题详细描述：页面不足一页时，footer会上在页面任意位置（底部始终在文档末尾，当文档较长时跟随在文档末尾，当文档较短时在窗口底部）。

总结一下当时用的方法：

<span style="font-size:14px;"><div class="doc">    <div class="bd">        <p>第一段内容</p>        <p>第二段内容</p>        <p>第三段内容</p>        <p>第四段内容</p>    </div></div><div class="ft">    <p>底部始终在文档末尾，当文档较长时跟随在文档末尾，当文档较短时在窗口底部。</p></div></span>

css代码：

<span style="font-size:14px;"> /* 底部自适应文档和窗口  */    html,body{width:100%;height:100%;margin:0;}    .doc{        position:relative;        min-height:100%;        _height:100%;    }    .bd{        padding:0 0 60px;        zoom:1;    }    .ft{        height:50px;        margin:-50px 0 0;        background:#ddd;    }   </span>

实现效果，如下图所示：

方法简单易行。在这里记录下来，欢迎各位拍砖。

0 0