下载首页 网络学院 最新更新 软件分类 国产软件 国外软件 汉化补丁 注册绿色 下载排行 精品软件 RSS订阅当前栏目
设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> XHTML >> XHTML学习 － 第10天:自适应高度
精品推荐
XHTML点击TOP10
·CSSVault推荐的130个CSS布局站点[1-3月]
·初学必知：XHTML网页中加入CSS的五种方式
·采访Eric Meyer的10个问题
·XHTML学习 － 第9天:第一个CSS布局实例
·CSSVault推荐的128个CSS布局站点[4-6月]
·你应该关注web标准的真正原因
·通向web标准之路
·shtml精简教程
·理解表现和结构相分离
·XHTML学习 － 第10天:自适应高度
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·网页模板的使用方法 （教程）
·网页对联广告代码效果大全
·初学者入门：如何学习网页制作？
·用JavaScript实现文件图片滚动效果
·常用CSS大全
·网页自动转向代码
·图片循环滚动完美解决
·JS表格排序新法
·DIV CSS网页布局实例解析：实现表格形式
精选专题

XHTML学习 － 第10天:自适应高度
作者: 来源:网络文章 时间:2005-12-11 23:20:06

XHTML学习 － 第10天:自适应高度(1)

如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)：

Body
这里是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }包含了#menu,#sidebar和#content

这里是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}

这里是主要内容，根据内容自动适应高度

这里是主要内容，根据内容自动适应高度

这里是主要内容，根据内容自动适应高度

这个例子的页面主要代码如下：

<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的背景色失效。)

共2页 9 7 [1] [2] 8 :>

XHTML学习 － 第10天:自适应高度 相关文章：
XHTML学习 － 第10天:自适应高度 相关软件：
特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
转载请注明来源：http://www.xgdown.com
帮助（？) 软件发布 版权声明 友情连接
Copyright 2005-2005 星光下载 All rights reserved. Powered By: DownPlus