css - 一个关于html布局的问题？

问题描述

问 题

代码如下：

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

效果：

1、当网页比较长，.g-ft在窗口的最下面

2、当网页短于.g-bd时，.g-ft贴在.g-bd后面

是来自网易nec的一个布局技巧，http://nec.netease.com/librar...，可以去那看更详细的，请问这个布局效果的原理是什么？是怎么实现底部自适应文档和窗口？

解决方案

这篇关于css - 一个关于html布局的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！