解决列高度自适应(列高度相同)的五种方法

1.背景图填充

这是使用最广泛的一种做法，无hacks，推荐使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Equal height(列高度相同的方法)</title>

body{

padding: 0;

margin: 0;

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

line-height: 140%;

background:#E7DFD3;

}

#middle{

width: 580px;

float:left;

background:#FFFFFF;

text-align:left;

}

#header,#footer{

background: #E8E8E8;

width: 750px;

text-align:center;

}

#sideleft{

width: 580px;

float: left;

position:relative;

margin-left:-580px;

}

#sideright{

width: 170px;

float: right;

position:relative;

margin: 0 -170px 0 0;

background: #F0F0F0;

}

#footer{

clear:both;

}

h1,h2,address,p{

margin: 0;

padding: .8em;

}

h1,h2{font-size: 20px;}

</style>

// <![CDATA[

function toggleContent(name,n) {

var i,t='',el = document.getElementById(name);

if (!el.origCont) el.origCont = el.innerHTML;

for (i=0;i<n;i++) t += el.origCont;

el.innerHTML = t;

}

// ]]>

</script>

</head>

<body>

<h2>sideleft</h2>

<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

<p> 像素是计算机屏幕上的不可缩放的点，而一个

h3 就是一个字大小的方块。由于字体大小的变化， h3

代表用户喜欢的文字大小的相对单位。 </p>

<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

</div>

<h2>sideright</h2>

<p> 像素是计算机屏幕上的不可缩放的点，而一个

h3 就是一个字大小的方块。由于字体大小的变化， h3

代表用户喜欢的文字大小的相对单位。 </p>

</div></div>

Footer

</address>

</div>

</body>

</html>

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

2.采用脚本控制列的高度（一）

需要事先知道哪列的高度，以此为基准用脚本控制。

document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"

上面的代码是以sideright的基准高度来控制sideleft的高度。

代码简单，但比较被动：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Equal height(使用JS实现列高度相同的方法)</title>

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;

}

#footer{

background: #E8E8E8;

width: 100%;

float: left;

}

h1,h2,address,p{

margin: 0;

padding: .8em;

}

h1,h2{font-size: 20px;}

</style>

</head>

<body>

</div>

<h2>sideleft</h2>

<p> 像素是计算机屏幕上的不可缩放的点，而一个

h3 就是一个字大小的方块。由于字体大小的变化， h3

代表用户喜欢的文字大小的相对单位。 </p>

<p> 像素是计算机屏幕上的不可缩放的点，而一个

h3 就是一个字大小的方块。由于字体大小的变化， h3

代表用户喜欢的文字大小的相对单位。 </p>

</div>

<h2>sideright</h2>

<p> 像素是计算机屏幕上的不可缩放的点，而一个

h3 就是一个字大小的方块。由于字体大小的变化， h3

代表用户喜欢的文字大小的相对单位。 </p>

</div>

document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"

</script>

Footer

</address>

</div>

</body>

</html>

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

3.采用脚本控制列的高度（二）

不需要事先知道哪列的高度，脚本自动判断。

代码较复杂，有点延时：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>脚本控制三行三列自适应高度DIV布局</title>

<!--

body{

font-size: 75%;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

line-height: 100%;

margin: 5px;

padding: 0px;

}

#header,#mid,#footer{

width: 760px;

margin: 0px auto;

padding: 0px;

}

#header{

background: #F4F4F4;

height: 60px;

margin-bottom: 5px;

}

h3,h5{

padding-top: 25px;

color: #708090;

text-align: center;

margin: 0;

}

#fbox{

background: #F1F1F1;

width: 195px;

float: left;

}

#mbox{

background: #DFF7FF;

margin: 0px 5px 0px;

padding: 0px;

float: left;

width: 360px;

}

#sbox{

background: #FFEBCC;

width: 195px;

float: right;

}

margin: 0px;

padding: 10px;

text-indent: 2em;

line-height: 130%;

}

#footer{

background: #CDDBED;

border-top: solid 5px #FFFFFF;

text-align: center;

height: 60px;

clear: both;

}

-->

</style>

</head>

<div id="header"><h3>脚本控制三行三列自适应高度DIV布局</h3></div>

亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。

使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。

</p><p>

亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。

使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。

</p></div>

亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。

使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。

</p>

<p>

如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。

</p>

<p>

亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。

使网站变得更具亲和力的一个最简单的方法就是允许

[1] [2] [3] 下一页