精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

本文主要跟大家分享:当文档较长时底部跟随在文档末尾,当文档较短时在窗口底部的CSS实现方式。下面青岛星网给出范例实现代码。

HTML范例代码

<div class="g-doc">
    <div class="g-bd">
        <p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
        <p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
        <p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
        <p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
        <p>请增加或减少内容,或改变窗口大小,以便查看效果。</p>
    </div>
</div>
<div class="g-ft">
    <p>底部始终在文档末尾,当文档较长时跟随在文档末尾,当文档较短时在窗口底部。</p>
</div>

CSS范例代码

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

在线Demo预览

Tags:div+css 固定