WEB2.0网页制作标准教程(10)自适应高度
作者:阿捷 来源:w3cn 发布时间:2008-02-19 19:21:00
标签:自适应,高度,css,web2.0
阅读上一篇教程: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)不用表格的菜单
0
投稿
猜你喜欢
- MySQL有6种日志,监控数据库系统的时候必须知道select日志slow select日志变更日志二进制变更日志(binlog) 
- 1069错误(由于登录失败而无法启动服务)解决方法在本版面出现这个问题的频率也算是很高的了,新手通常会比较多遇到这个问题原因很简单,安装SQ
- 很多现代的浏览器在地址栏的右边有个搜索框,默认的安装有 Google 搜索等。如下图所示:其实这是 OpenSearch 的一个应用,只要编
- 如果你经常浏览网页一定见过很多网站在form表单中的文本域(textarea)中添加了的背景图片,一般是使用网站的logo,我记得我最早注意
- 本周的豆知识分享就来深入研究一下window.event对象。请先看看下边的代码片断。 <button id=”btn”&g
- '****'函数名称: strReplace(Str)'函数功能: 过滤单引号'参数说明: Str 
- 突然有个想法,不知道是不是首创:用"表情符号"做植入广告. 目前的表情符号 "黄色小圆脸"系列可以说
- 声明定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。平台:win/I
- 如何使DIV居中,div垂直居中,div水平居中.这个问题在用CSS来设计网页的时候经常会遇到,如果用传统的表格来布局是很简单的,CSS里就
- HTTP状态码 摘要说明成功2××  
- 在计算机中数据有两种特征:类型和长度。所谓数据类型就是以数据的表现方式和存储方式来划分的数据的种类。在SQL Server 中每个变量、参数
- 需要的软件phpStudy 用来导入一个数据库api-server 数据库功能可以开启一个服务器,让开发环境可以使用生产环境的网址请求安装
- 文通过一个操作实例来说明SQL中主标识列IDENTITY的使用技巧。要求:在 sql server 2005中,建立数据表book,在表bo
- 大概在九九年做游戏网站的时候,就对文章的发布感到麻烦,不过那会儿玩ASP不精。只是将就用着。在遇到长文件 10000 字时网页就是一大片长了
- 在此之前,我写了两篇关于ASP结合XML的贴子,分别介绍了用XML取代数据库和用XML整合数据库这两方面的技术,让数据库在某种情况下不再是我
- 导言(Introduction)这个提案描述了如何在jQuery的核心库中增加模板支持。更为特别是,这个提案描述了一个新的jQuery方法-
- 综述:本文讨论了VBScript和 JScript之间的区别,以及它们的使用场合。推荐:Vbscript5.5中文语言参考手册chm格式下载
- 富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能,容易被不会编写 H
- 内容摘要:本文介绍了使用js来实现下拉伸缩导航菜单的功能,并带有渐显的效果,值得收藏。正好这几天公司不忙,学校又没有事情,所以想抽空架一个个
- 在Microsoft SQL Server 2000中,用于数据存储的实用工具是数据库。数据库的物理表现是操作系统文件,即在物理上,一个数据