0

0

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

php中文网

php中文网

发布时间:2016-05-16 12:09:11

|

2146人浏览过

|

来源于php中文网

原创

1.背景图填充

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

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



Equal height(列高度相同的方法)





  

    

Head


  

  

  

    

sideleft


 

默认长度  加长页面


    

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


    

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


    

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


    

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


    

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


  

    

sideright

 
    

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


    

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


    

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


    

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


  

  

    

      Footer
    

    

制作:网页陶吧


  



 


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">



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




  

    

Head


  

  

    

sideleft


    

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


    

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


    

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


    

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


    

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


    

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


    

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


    

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


  

  

    

sideright


    

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


    

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


    

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


    

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


  

  
  

    

      Footer
    

    

制作:网页陶吧


  



 


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

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

代码较复杂,有点延时:

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



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


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




亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。


亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。



亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。



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

AI发型设计
AI发型设计

虚拟发型试穿工具和发型模拟器

下载


亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。



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



亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。
使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。



仅供演示网页陶吧


  


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

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

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

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



Equal height(DIV+CSS布局中自适应高度的解决方法)




  

    

Head


  

  

  

sideleft


    

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


    

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


    

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


    

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


    

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


    

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


    

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


    

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


  

  

  

sideright


    

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


    

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


    

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


    

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


  

  

    

    Footer
    

 

制作:网页陶吧


  




  


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">



Equal height(DIV+CSS布局中自适应高度的解决方法)




  

    

Head


  

  

  

sideleft


    

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


    

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


    

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


    

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


    

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


    

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


    

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


    

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



  

  

  

sideright


    

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


    

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


    

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


    

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


  

  

    

    Footer
    

 

制作:网页陶吧


  




  


相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

43

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

84

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

24

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

35

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

16

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

56

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

16

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

26

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
企业网站综合布局实战视频教程
企业网站综合布局实战视频教程

共37课时 | 7.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号