返回
前端
分类

用下面的代码实现了.(虽然个人认为这个代码实用性不太强,脚本的方法使列的高度相同

日期: 2020-02-08 19:20 浏览次数 : 65

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

1、背景图填充

让两个DIV的高度隐式同步,div高度隐同步

以前遇到两个相临近的块,高度要一样,但是内容多少又不定时,我都是通过把这两块封装在TD里面实现,但今天在CSDN上面看到有人要通过JS来实现这个,我尝试了一下.

用下面的代码实现了.(虽然个人认为这个代码实用性不太强,但在特定的场景也是一种解决方案).从下面的代码可以看出JQuery使用真是十分方便,使用原生的对象我还真不知道如何取出一个元素的高度,我用document.getElementById("rightbar").style.height得到的是auto.

首发于:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"; 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>无标题文档 </title> 

  <SCRIPT LANGUAGE="JavaScript" src="; </SCRIPT> 

  <Script> 

  </script> 
</head> 

<body> 
<div> 

  <div id=main > 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 

  </div> 
  <div id=rightbar > 
  右边栏,内容比main少 
  </div> 
</div> 
<script language="javascript"> 
window.onload=function(){ 

var he= $('#main').height(); 

$('#rightbar').height(he); 

}; 
</script> 
</html> 

先看代码:

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

怎使用CSS+DIV样式同步左右两个DIV的高度?

不考虑IE6的情况下 用min-height:?px; IE6不支持这个  

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Equal height(列高度相同的方法)</title> <style type="text/css"> 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> <script type="text/javascript"> // <![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> <div id="header"> <h1>Head</h1> <div id="middle"> <div id="sideright"> <div id="sideleft"> <h2>sideleft</h2> <p><a href="javascript:toggleContent('sideleft',1)">默认长度??<a href="javascript:toggleContent('sideleft',2)">加长页面</p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不轻易。但是假如恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点,而一个 h3 就是一个字大小的方块。由于字体大小的变化, h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要轻易些,因为假如尺寸不变,则考虑的东西就相对较少。可是假如采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。 </p> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不轻易。但是假如恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 </p> </div> <h2>sideright</h2> <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不轻易。但是假如恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 </p> <p> 像素是计算机屏幕上的不可缩放的点,而一个 h3 就是一个字大小的方块。由于字体大小的变化, h3 代表用户喜欢的文字大小的相对单位。 </p> <p> 采用印刷式的固定设计方案或许要轻易些,因为假如尺寸不变,则考虑的东西就相对较少。可是假如采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。 </p> <p> 也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。 </p> </div></div> <div id="footer"> <address> Footer </address> <p>制作:Yzci.Com</p> </div> </body> </html>

DIV+CSS 怎让左右两个DIV的高度一致?

最经典的两列自适应高度CSS代码,IE5、6、7,FF下测试通过。希望对你有用:

body{
padding: 0;
margin: 0;
color:#333/*#0d7206*/;
font-size: 14.7px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
text-align: center;
background:url(body_bg.jpg) #c8fdcc repeat-x top left;
}
#pagebody{
width: 760px;
margin:10px auto;
overflow: hidden;
}
#sidebar{
border-right:1px #009900 dotted;
width: 199px;
float: left;
background:url(l_bg_contbox.png) #FFF repeat-y left;
text-align: left;
}
#mainbody{
width: 560px;
float: left;
background:url(r_bg_contbox.png) /*#f6f6f6*/#fff repeat-y right;
text-align: left;
}
/* easy clearing */
#pagebody:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#pagebody
{
display: inline-block;
}
/**/
#pagebody
{
display: block;
}
/* end easy clearing */
/**/
#sidebar, #mainbody
必赢备用网址 ,{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sidebar, #mainbody
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sidebar:before, #mainbody:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/...余下全文>>  

以前遇到两个相临近的块,高度要一样,但是内容多少又不定时,我都是通过把这两块封装在TD里面实...

实现原理

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

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

2、采用脚本控制列的高度(一)

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

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

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

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

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

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

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

代码简单,但比较被动:

兼容各浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Equal height(使用JS实现列高度相同的方法)</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; } #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> <script type="text/javascript"> document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight "px" </script> <div id="footer"> <address> Footer </address> <p>制作:Yzci.Com</p> </div> </div> </body> </html>

IE Mac 5

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

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

3、采用脚本控制列的高度(二)

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

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

Opera

代码较复杂,有点延时:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="" xml:lang="en" lang="en"> <head> <title>脚本控制三行三列自适应高度DIV布局</title> <script src="../js/eqCols.js" type="text/javascript"></script> <style type="text/css"> 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; } p{ 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> <body onload="P7_equalCols('fbox','mbox','sbox')"> <div id="header"><h3>脚本控制三行三列自适应高度DIV布局</h3></div> <div id="mid"> <div id="fbox"><p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍

/* 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 */
/**/

  • 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是答应用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 </p><p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍
  • 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是答应用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 </p></div> <div id="mbox"><p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍
  • 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是答应用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 </p> <p> 假如设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows 下的IE却不能。 </p> <p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍
  • 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是答应用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 </p> <p> 假如设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows 下的IE却不能。 </p> </div><div id="sbox"><p> 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍
  • 你我变老时就会成为他们的一员。 使网站变得更具亲和力的一个最简单的方法就是答应用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 </p></div> </div> <div id="footer"><h5>制作:Yzci.Com</h5></div> </body> </html>
  1. Opera8 处理 overflow: hidden 有个 BUG, 还得加上以下代码:

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

/**/
#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;
 }
}
/**/

4、采用负的外边界和内补丁相结合

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

不需要事先知道哪列的高度。

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

hacks 比较多(主要是 opera 的),但轻易使用,推荐:

最终效果 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "; <html xmlns="; <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>制作:Yzci.Com</p> </div> </div> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "; <html xmlns="; <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="; </div> </div> </body> </html>

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

5、采用负的左右边界和相对定位

相关阅读

下面的例子能较好地解决列高度相同的问题。

  • 详解 display:block| inline |inline-block 的区别

三行二列布局,主要内容在左边,网页宽度 750px, 左列 580px, 右列 170px。

CSS 代码:

#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}

XHTML 代码:

<div id="middle">
<div id="sideright">
<div id="sideleft">
</div>
</div>
</div>

 

从结构看,middle(使用的是左列希望的背景色)在最外面,宽度等于 sideleft 的宽度,往里一层是 sideright,其宽度为 170px, 浮动方向是右边。但其右面的边界是负的 170px,相当于将 sideright 拉向右面(右面紧贴着 middle 的右边)170px 的位置。而 sideleft 又是套在 sideright 里面的,其内容先于 sideright 出来,左边界是负的 580,相当于在 sideright 左边 580px,此时 sideleft 和 middle 位置重合。

优点:不需要背景图片,无 hacks,完全的自适应高度。

缺点:现在的代码只能左对齐。

演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "; <html xmlns="; <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>制作:Yzci.Com</p> </div> </div> </body> </html>

[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

(原文最后一个示例的代码有误,故您可以参照 Div + CSS 高度自适应解决方案这篇文章来理解。千一网络编辑注)