设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> CSS >> WEB标准布局Div + CSS 高度自适应解决方案
精品推荐
CSS点击TOP10
·浏览器Firefox与IE在CSS样式表中的差异
·常用CSS大全
·DIV CSS网页布局实例解析:实现表格形式
·用CSS实现图片垂直居中方法
·改变IE的字体大小设置时,页面字体不发生改变,怎样实现?
·CSS中文教程
·网页排版CSS教学
·css 所有属性如何快速记忆
·网页特效代码:纯CSS制作的网页下拉菜单
·CSS常用小技巧大总结
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·网页模板的使用方法 (教程)
·循环不间断向上滚动的文本特效代码
·网页对联广告代码效果大全
·浏览器Firefox与IE在CSS样式表中的差异
·用JavaScript实现文件图片滚动效果
·常用CSS大全
·初学者入门:如何学习网页制作?
·图片循环滚动完美解决
·javascript+xml实现二级下拉菜单,不会被任何标签或元素遮住
精选专题

WEB标准布局Div + CSS 高度自适应解决方案

作者: 来源:http://www.xgdown.com/ 时间:2007-8-31 12:09:16

自适应高度的问题,采用 Div + CSS技巧">CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为…

下面介绍采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法

主要代码:

#wrap{overflow:hidden;} /*外容器*/
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} /*列*/


完整例子代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div + CSS Example, Wayhome's Blog</title>
<style type="text/css">
<!--
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
-->
</style></head>
<body>
<div id="wrap" style="width:300px; background:#FFFF00;">
<div id="sidebar_left" style="float:left;width:100px; background:#FF0000;">Left</div>
<div id="sidebar_mid" style="float:left;width:100px; background:#666;">
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
</div>
<div id="sidebar_right" style="float:right;width:100px; background:#0000FF;">Right</div>
</div>
</body>
</html>

在 IE5.5、IE6、FF1.5、Opera9 测试通过。

WEB标准布局Div + CSS 高度自适应解决方案 相关文章:
WEB标准布局Div + CSS 高度自适应解决方案 相关软件:
特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
转载请注明来源:http://www.xgdown.com