繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 使用Web标准建站第10天：自适应高度
- HTML/XHTML教程
- CSS实用教程（二）
- CSS 循序渐进（二）字的艺术
- CSS 循序渐进（一）画个瓢
- CSS语法手册（二）文本属性
- CSS语法手册（四）文本填充，边框，边界和位置属性（二）
- CSS语法手册（一）字体属性
- CSS语法手册（三）文本填充，边框，边界和位置属性（一）
- CSS语法手册（五）颜色和背景属性
- CSS语法手册（六）分类属性
- 捷足先登学用CSS：HTML结构化
- HTML语言剖析(4)
- HTML语言剖析(3)
- HTML语言剖析(1)
- HTML语言剖析(2)
- 网页背景设计全攻略(2)
- 在 CSS 中关于字体处理效果的思考
- 常见页面元素遮住菜单解决方法
- 样 式 表 全 接 触（1）
- 样 式 表 全 接 触（2）
- 样 式 表 全 接 触（6）
HTML/XHTML教程 中的 使用Web标准建站第10天：自适应高度
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 62 ::
收藏到网摘: 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
