解决列高度自适应(相同)的五种方法_经验交流

1.背景图填充

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

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




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;}

  

    
Head

  

  

  

    
sideleft

 

默认长度
  

加长页面

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

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

      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 

<script> <BR>// <![CDATA[ <br><br>function toggleContent(name,n) { <BR> var i,t='',el = document.getElementById(name); <BR> if (!el.origCont) el.origCont = el.innerHTML; <br><br> for (i=0;i<n;i++) t += el.origCont; <BR> el.innerHTML = t; <BR> } <br><br>// ]]> <BR></script>    <script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 <script> <BR>document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px" <BR></script> <script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script>    <script></script> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 <script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script> <script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script>    <script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。         sideright       要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。       像素是计算机屏幕上的不可缩放的点，而一个       h3 就是一个字大小的方块。由于字体大小的变化， h3       代表用户喜欢的文字大小的相对单位。       采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。       也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。                   Footer          制作：网页陶吧   


<script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script> 


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

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

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

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

代码简单，但比较被动：

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

  

    

Head

  

  

    

sideleft

    

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

    

 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 

    

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

    

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

    

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

    

 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 

    

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

    

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

  

  

    

sideright

    

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

    

 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 

    

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

    

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

  

  <script> <BR>document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px" <BR></script>
  

    

      Footer
    

    

制作：网页陶吧

  

<script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script> 


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

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

代码较复杂，有点延时：

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



 
<script></script> 
 

脚本控制三行三列自适应高度DIV布局

접근성은 시각 장애인이나 스크린 리더만의 문제가 아닙니다. 시각 장애인은 아니지만 시각 장애가 있는 사람들이 많이 있습니다. 당신과 나도 나이가 들면서 그들 중 하나가 될 것입니다.
웹사이트의 접근성을 높이는 가장 간단한 방법 중 하나는 사용자가 텍스트 크기를 변경할 수 있도록 허용하는 것입니다. 이러한 옵션 제공을 거부하면 사용자가 제어할 수 없게 되어 편안하게 읽을 수 없게 됩니다.

접근성은 시각 장애인이나 스크린 리더만의 문제가 아닙니다. 시각 장애인은 아니지만 시각 장애가 있는 사람들이 많이 있습니다. 당신과 나도 나이가 들면서 그들 중 하나가 될 것입니다.
웹사이트의 접근성을 높이는 가장 간단한 방법 중 하나는 사용자가 텍스트 크기를 변경할 수 있도록 허용하는 것입니다. 이러한 옵션 제공을 거부하면 사용자가 제어할 수 없게 되어 편안하게 읽을 수 없게 됩니다.

접근성은 시각 장애인이나 스크린 리더만의 문제가 아닙니다. 시각 장애인은 아니지만 시각 장애가 있는 사람들이 많이 있습니다. 당신과 나도 나이가 들면서 그들 중 하나가 될 것입니다.
웹사이트의 접근성을 높이는 가장 간단한 방법 중 하나는 사용자가 텍스트 크기를 변경할 수 있도록 허용하는 것입니다. 이러한 옵션 제공을 거부하면 사용자가 제어할 수 없게 되어 편안하게 읽을 수 없게 됩니다.

디자이너가 텍스트 크기를 픽셀 단위로 지정하면 Internet Explorer는 다른 브라우저와 다르게 텍스트 크기를 변경하므로 대부분의 사용자는 텍스트 크기를 조정할 수 없습니다. Mozilla와 Opera는 픽셀 크기로 설정된 텍스트의 크기를 조절할 수 있지만 Windows의 IE는 그렇지 않습니다.

접근성은 시각 장애인이나 스크린 리더만의 문제가 아닙니다. 시각 장애인은 아니지만 시각 장애가 있는 사람들이 많이 있습니다. 당신과 나도 나이가 들면서 그들 중 하나가 될 것입니다.
웹사이트의 접근성을 높이는 가장 간단한 방법 중 하나는 사용자가 텍스트 크기를 변경할 수 있도록 허용하는 것입니다. 이러한 옵션 제공을 거부하면 사용자가 제어할 수 없게 되어 편안하게 읽을 수 없게 됩니다.

디자이너가 텍스트 크기를 픽셀 단위로 지정하면 Internet Explorer는 다른 브라우저와 다르게 텍스트 크기를 변경하므로 대부분의 사용자는 텍스트 크기를 조정할 수 없습니다. Mozilla와 Opera는 픽셀 크기로 설정된 텍스트의 크기를 조절할 수 있지만 Windows의 IE는 그렇지 않습니다.

접근성은 시각 장애인이나 스크린 리더만의 문제가 아닙니다. 시각 장애인은 아니지만 시각 장애가 있는 사람들이 많이 있습니다. 당신과 나도 나이가 들면서 그들 중 하나가 될 것입니다.
웹사이트의 접근성을 높이는 가장 간단한 방법 중 하나는 사용자가 텍스트 크기를 변경할 수 있도록 허용하는 것입니다. 이러한 옵션 제공을 거부하면 사용자가 제어할 수 없게 되어 편안하게 읽을 수 없게 됩니다.

시연용웹타오바

 <script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script> 


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

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

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

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

  

    

Head

  

sideleft

고정된 픽셀 기반 디자인 접근 방식에서 유연하고 상대적인 디자인 접근 방식으로 전환하는 것은 쉽지 않습니다. 하지만 올바르게 사용한다면 디자인을 희생하지 않고도 접근성과 사용 편의성을 높이는 자연스러운 선택이 될 수 있습니다.

픽셀은 컴퓨터 화면에서 크기 조절이 불가능한 점이고,
h3은 단어 크기의 정사각형입니다. 글꼴 크기 변경으로 인해 h3
은 사용자가 선호하는 텍스트 크기의 상대적 단위를 나타냅니다.

크기가 동일하면 고려할 사항이 상대적으로 적기 때문에 인쇄된 고정 디자인을 사용하는 것이 더 쉬울 수 있습니다. 그러나 유연한 디자인 접근 방식을 채택하면 컴퓨터의 모니터와 브라우저를 최대한 활용할 수 있습니다.

웹사이트가 특정한 방식으로 표시되기를 원하지만 사용자가 보고 싶어하는 내용은 다를 수 있습니다. 사용자에게 강요하는 모든 것은 사용 편의성을 훼손하고 따라서 사이트의 성공에 해를 끼칩니다.

고정된 픽셀 기반 디자인 접근 방식에서 유연하고 상대적인 디자인 접근 방식으로 전환하는 것은 쉽지 않습니다. 하지만 올바르게 사용한다면 디자인을 희생하지 않고도 접근성과 사용 편의성을 높이는 자연스러운 선택이 될 수 있습니다.

픽셀은 컴퓨터 화면에서 크기 조절이 불가능한 점이고,
h3은 단어 크기의 정사각형입니다. 글꼴 크기 변경으로 인해 h3
은 사용자가 선호하는 텍스트 크기의 상대적 단위를 나타냅니다.

크기가 동일하면 고려할 사항이 상대적으로 적기 때문에 인쇄된 고정 디자인을 사용하는 것이 더 쉬울 수 있습니다. 그러나 유연한 디자인 접근 방식을 채택하면 컴퓨터의 모니터와 브라우저를 최대한 활용할 수 있습니다.

웹사이트가 특정한 방식으로 표시되기를 원하지만 사용자가 보고 싶어하는 내용은 다를 수 있습니다. 사용자에게 강요하는 모든 것은 사용 편의성을 훼손하고 따라서 사이트의 성공에 해를 끼칩니다.

sideright

고정된 픽셀 기반 디자인 접근 방식에서 유연하고 상대적인 디자인 접근 방식으로 쉽지 않습니다. . 하지만 올바르게 사용한다면 디자인을 희생하지 않고도 접근성과 사용 편의성을 높이는 자연스러운 선택이 될 수 있습니다.

픽셀은 컴퓨터 화면에서 크기 조절이 불가능한 점이고,
h3은 단어 크기의 정사각형입니다. 글꼴 크기 변경으로 인해 h3
은 사용자가 선호하는 텍스트 크기의 상대적 단위를 나타냅니다.

크기가 동일하면 고려할 사항이 상대적으로 적기 때문에 인쇄된 고정 디자인을 사용하는 것이 더 쉬울 수 있습니다. 그러나 유연한 디자인 접근 방식을 채택하면 컴퓨터의 모니터와 브라우저를 최대한 활용할 수 있습니다.

웹사이트가 특정한 방식으로 표시되기를 원하지만 사용자가 보고 싶어하는 내용은 다를 수 있습니다. 사용자에게 강요하는 모든 것은 사용 편의성을 훼손하고 따라서 사이트의 성공에 해를 끼칩니다.

>

 <script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script> 


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代码：

 
  

 
    

 
    

 
  

 

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

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

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

演示：

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

  

    

Head

  

  

  

sideleft

    

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

    

 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 

    

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

    

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

    

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

    

 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 

    

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

    

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

  

  

  

sideright

    

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

    

 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 

    

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

    

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

  

  

    

    Footer
    

 

制作：网页陶吧

  

 <script> <BR>var now = new Date(); <BR>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' style="max-width:90%">"); <BR></script>