CSS布局自适应高度解决方法-Html/Css-网页设计,技术教程-E库技术学院Edu.iecool.com




E库技术学院--您的网络技术顾问！	网站首页┊素材图片库┊设计原稿┊网页模板┊网站赏析┊下载中心┊明星图库┊E库论坛

	设为首页
	加入收藏
	我要投稿

E库首页 ┊ 学院首页 ┊ 图形图象 ┊ 网页设计 ┊ 网络编程 ┊ 数据库 ┊ 服务器 ┊ 建站技术 ┊ 业界新闻 ┊ 作者专栏 ┊ 常用范文 ┊ 预留栏目

当前位置：学院首页>>网页设计教程>>Html/Css教程>>CSS布局自适应高度解决方法

CSS布局自适应高度解决方法

[ 来源：蓝色理想 | 作者：forestgan | 时间：2006-4-4 12:35:04 | 浏览：人次 ]
收藏到新浪ViVi ┊ 收藏到365KEY ┊ 收藏到我摘 ┊ 双击滚屏单击停止

原作者:Alex Robinson
原文标题:Equal Height Columns

这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

先看代码：

#wrap{
overflow: hidden;
}

#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}

实现原理：

块元素必须包含在一个容器里。

应用overflow: hidden 到容器里的元素。

应用 padding-bottom（足够大的值）到列的块元素。

应用margin-bottom（足够大的值）到列的块元素。

padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。

兼容各浏览器

IE Mac 5

得到高度正确，所以要过滤掉上面的代码。

/*\*/
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/

Opera

1. Opera7.0-7.2不能正确清除溢出部分，所以要加：

/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/

2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：

/*\*/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/

3.Opera9的B2在修正8的bug.

测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。

最终效果:

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title> <style type="text/css"> body{ padding: 0; margin: 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 140%; text-align: center; background:#E7DFD3; } #wrap{ width: 750px; margin: 0 auto; overflow: hidden; } #header{ background: #E8E8E8; } #sideleft{ width: 580px; float: left; background: #FFF; text-align: left; } #sideright{ width: 170px; float: left; background: #F0F0F0; text-align: left; } /* easy clearing */ #wrap:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } #wrap { display: inline-block; } /*\*/ #wrap { display: block; } /* end easy clearing */ /*\*/ #sideleft, #sideright { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } @media all and (min-width: 0px) { #sideleft, #sideright { padding-bottom: 0 !important; margin-bottom: 0 !important; } #sideleft:before, #sideright:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; } } /**/ #footer{ background: #E8E8E8; width: 100%; float: left; } h1,h2,address,p{ margin: 0; padding: .8em; } h1,h2{font-size: 20px;} </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Head</h1> </div> <div id="sideleft"> <h2>sideleft</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="sideright"> <h2>sideright</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点，而一个 h3 就是一个字大小的方块。由于字体大小的变化， h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p> </div> <div id="footer"> <address> Footer </address> <p>制作：<a href="http://www.forest53.com">forestgan</a></p> </div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

“CSS布局自适应高度解决方法”教程到此结束==>||

相关教程

☉暂无相关教程

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。

投稿作者： forestgan 　信息来源：蓝色理想　录入时间： 2006-4-4 12:35:04
投稿信箱： web#iecool.com

设为首页 - 加入收藏 - 关于我们 - 广告服务 - 版权申明 - 友情链接 - 联系方式 - 会员投稿