位置：首页>> 网络编程>> 网页设计>> CSS布局自适应高度解决方法

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

作者：forestgan　　发布时间：2014-07-27 12:47:30　

标签：

原作者: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 全部选择]

原文：http://www.positioniseverything.net/articles/onetruelayout/equalheight

投稿

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

猜你喜欢