繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 使用Web标准建站第10天：自适应高度
- HTML/XHTML教程
- HTML表格标记教程(37):表头的背景图象属性BACKGROUND
- HTML表格标记教程(41):表头的宽度和高度属性WIDTH、HEIGHT
- HTML表格标记教程(36):表头的背景色属性BGCOLOR
- 揭开HTML 5工作草稿的神秘面纱
- 清除网页文字水印的两种简单方法
- W3C公布最新的HTML5标准草案
- XHTML与CSS的面向对象编程
- XHTML三种文件类型声明
- 通过实例掌握BR和P标签的区别
- 网页表格或div层在网页中被撑开解决之道
- 网页设计之网页音乐的实现技巧
- XHTML常用标签介绍
- HTML网页图片标记
- 网页表单设计实例技巧五则
- HTML网页列表标记学习教程
- HTML网页超链接标记
- HTML表单标记教程(4):
- HTML表单标记教程(5):文字域标记
- HTML表单标记教程(2):
- HTML表单标记教程(3):输入标记
HTML/XHTML教程 中的 使用Web标准建站第10天：自适应高度
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 46 ::
收藏到网摘: n/a
这个例子的页面主要代码如下：
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer层就自动下移。这样就实现了高度的自适应。
另外值得注意的是：#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;"，这是浮动法定位，还可以采用绝对定位来实现这样的效果。
这个方法存在另一个问题，就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色，因为在Mozilla等浏览器中#mainbox的背景色失效。)
好了，主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。如果你希望尝试其他布局，推荐看看以下文章:
- CSS布局16例
- onestab:三栏复合布局演示
- onestab:自由伸展的三栏式版面
Tips:[onestab 的"P.I.E"专题] 还有更多精彩介绍，推荐去看看。
评论 (0) All
