当前位置：编程学习 > html/css >>

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

答案：1.背景图填充 

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

<!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(列高度相同的方法)</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=>    <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>制作：<a href=>  </div> 
</body> 
</html> 
<script language="Javascript">  
var now = new Date();  
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");  
</script>  
<noscript>  
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>  
</noscript> 

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"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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>制作：<a href=>  </div> 
</div> 
</body> 
</html><script language="Javascript">  
var now = new Date();  
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");  
</script>  
<noscript>  
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>  
</noscript> 

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

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

代码较复杂，有点延时： 

<!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" 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> 
亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。 
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 
</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>仅供演示<a href=></body> 
</html> <script language="Javascript">  
var now = new Date();  
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");  
</script>  
<noscript>  
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>  
</noscript> 

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

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

hacks比较多（主要是opera的），但容易使用，推荐： 

<!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=>  </div> 
</div> 
</body> 
</html> 
 <script language="Javascript">  
var now = new Date();  
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");  
</script>  
<noscript>  
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>  
</noscript> 

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

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

三行二列布局，主要内容在左边，网页宽度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" "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=>  </div> 
</div> 
</body> 
</html> 
 <script language="Javascript">  
var now = new Date();  
document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");  
</script>  
<noscript>  
<img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/>  
</noscript>

上一个：各浏览器padding、margin的差异
下一个：Meta标签详解

更多图片编程知识:
更多html/css疑问解答：
div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊
css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
css 属性选择器 ie6 不支持吗？
用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：
介绍本学习css的书
wordpress多个CSS样式怎么调用？
这个div 的css是如何编写的
div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？
表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。
dw中html文档为什么无法链接css文档
设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。
我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？
css问题，跪求大大帮忙
请教网页设计高手，如下图的这种css代码怎么写？
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，