WEB2.0网页制作标准教程（10）自适应高度
作者：阿捷 来源：w3cn 时间：2008-02-19 19:21:00
阅读上一篇教程：WEB2.0网页制作标准教程（9）第一个CSS布局实例
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。
下面是实现例子(白色背景框模拟一个页面)：
Body
这个例子的页面主要代码如下：
<div id="header"></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的背景色失效。)
好了，主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。
接着阅读下一篇教程：WEB2.0网页制作标准教程（11）不用表格的菜单
标签：自适应,高度,css,web2.0
0
投稿猜你喜欢
Django实现翻页的示例代码
2023-01-10 23:10:20
Sysbench对Mysql进行基准测试过程解析
2024-01-15 18:04:25
解决Python 进程池Pool中一些坑
2023-12-21 00:24:31
SQLServer 2000 升级到 SQLServer 2008 性能之需要注意的地方之一
2012-02-25 19:44:26
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2023-06-09 01:05:00
pandas中DataFrame修改index、columns名的方法示例
2022-02-14 15:42:37
postman和python mock测试过程图解
2022-02-19 00:59:57
Oracle数据库索引的维护
2010-07-26 13:29:00
浅析python协程相关概念
2021-06-28 07:43:16
Python切换pip安装源的方法详解
2023-04-29 22:06:36
JavaScript中定义函数的三种方法
2024-05-09 10:37:04
Vue插槽原理与用法详解
2024-05-09 10:43:09
Python使用当前时间、随机数产生一个唯一数字的方法
2022-02-10 14:57:07
Python下的常用下载安装工具pip的安装方法
2021-08-31 05:05:35
解决TensorFlow模型恢复报错的问题
2022-06-15 16:24:31
SQLServer导出数据到MySQL实例介绍
2024-01-13 08:07:17
八个超级好用的Python自动化脚本(小结)
2021-03-02 14:52:43
Yahoo!网站性能最佳体验的34条黄金守则——JavaScript和CSS
2008-05-29 13:34:00
python简单实现旋转图片的方法
2021-06-09 08:29:11
一文深入了解Python中的继承知识点
2023-01-16 19:57:16
