标准页面布局

来源：互联网发布：淘宝店铺页头装修编辑：程序博客网时间：2024/06/05 08:48

一直想做一个标准页面布局，满足：

1.包含头部、正文和尾部；

2.当页面内容不足一页时，尾部显示在浏览器的最底端，不产生滚动条

3.当页面内容超过一页时，尾部显示在正文下方

最开始时，代码是这么写的

<!DOCTYPE><html><head><meta charset='utf-8'><title>cecgw</title><style type="text/css">*{margin: 0px;padding: 0px;}body{min-height: 100%;position: relative;}header{width: 100%;height: 50px;background: #fff;box-shadow: 0px 0px 5px #888888;}section{/*height: 2000px;*/}footer{width: 100%;height: 50px;background: #fff;box-shadow: 0px 0px 5px #888888;position: absolute;bottom: 0px;left: 0px;}</style></head><body>    <header>网页头部<!--头部--></header>      <section>网页正文<!--内容--></section>      <footer>网页尾部<!--尾部--></footer>  </body></html>

经过测试后发现，IE和chrome能够满足要求，但是在FF下，显示就有问题，body的高度不是100%。然后就以为ff不支持min-height。在网上搜了多篇文章以后发现，设置百分比高度时，需要满足：其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。

所以，就试着增加一行css代码

html{height: 100%;}

这样就可以满足要求了。

（至于为什么chrome和ie在不加上面这行代码的情况下，也能正确显示，我就不晓得了。。。。以后了解清楚以后再做更新吧！）

如果将<!DOCTYPE>改为<!DOCTYPE html>，页面结构就不符合要求了，正确的写法就变成如下：

<!DOCTYPE html><html><head><meta charset='utf-8'><title>cecgw</title><style type="text/css">*{margin: 0px;padding: 0px;}html{height: 100%}body{min-height: 100%;height: auto;position: relative;}header{width: 100%;height: 50px;background: #fff;box-shadow: 0px 0px 5px #888888;}section{/*height: 2000px;*/}footer{width: 100%;height: 50px;background: #fff;box-shadow: 0px 0px 5px #888888;position: absolute;bottom: 0px;left: 0px;}</style></head><body>    <header>网页头部<!--头部--></header>      <section>网页正文<!--内容--></section>      <footer>网页尾部<!--尾部--></footer>  </body></html>

推荐链接：http://www.zhangxinxu.com/wordpress/2009/09/%E5%AF%B9html%E4%B8%8Ebody%E7%9A%84%E4%B8%80%E4%BA%9B%E7%A0%94%E7%A9%B6%E4%B8%8E%E7%90%86%E8%A7%A3/

0 0