欢迎来到福编程网，本站提供各种互联网专业知识！
手机版
微信关注
快捷导航
正则表达式 AJAX相关 黑客相关 相关技巧 Mysql MsSql MsSql2005 MsSql2008 MariaDB Oracle Access SQLite PostgreSQL MongoDB DB2 Redis 数据库文摘 数据库其它 LINUX RedHat/Centos Ubuntu/Debian Fedora Solaris 红旗Linux Unix/BSD 苹果MAC 麒麟系统 注册表 BIOS 系统安装 系统进程 Fireworks教程
您的位置：网站首页 > 网络编程 > CSS/HTML > 经验交流

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

发布时间：2007-02-09　作者：　来源：转载
标签： 雪佛兰 通用 奢华 劳斯莱斯 旗舰版 64位 收藏夹 解调器
1.背景图填充这是使用最广泛的一种做法，无hacks，推荐使用：Equalheight(列高度相同的方法)body{padding:0;margin:0;font-size:12px;font-family:Arial,Helvetica,sans-serif;line-height:140%;background:#E7DFD3;}#middle{width:580px;float:left;bac
1.背景图填充

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





Equalheight(列高度相同的方法)

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-170px00;
background:#F0F0F0;
}

#footer{
clear:both;

}
h1,h2,address,p{
margin:0;
padding:.8em;
}
h1,h2{font-size:20px;}



//

functiontoggleContent(name,n){
vari,t='',el=document.getElementById(name);
if(!el.origCont)el.origCont=el.innerHTML;

for(i=0;iel.innerHTML=t;
}

//]]>



Head





sideleft


默认长度加长页面


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


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


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


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


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



sideright


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


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


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


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





Footer

制作：网页陶吧






varnow=newDate();
document.write("");

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

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

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

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

代码简单，但比较被动：





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

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:0auto;
/*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;}





Head




sideleft


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


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


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


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


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


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


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


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




sideright


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


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


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


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




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



Footer

制作：网页陶吧






varnow=newDate();
document.write("");

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

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

代码较复杂，有点延时：



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






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




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


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



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



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



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



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



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



仅供演示网页陶吧



varnow=newDate();
document.write("");

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

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

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





Equalheight(DIV+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:0auto;
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;
}
/*easyclearing*/
#wrap:after
{
content:'[DONOTLEAVEITISNOTREAL]';
display:block;
height:0;
clear:both;
visibility:hidden;
}
#wrap
{
display:inline-block;
}
/**/
#wrap
{
display:block;
}
/*endeasyclearing*/
/**/
#sideleft,#sideright
{
padding-bottom:32767px!important;
margin-bottom:-32767px!important;
}
@mediaalland(min-width:0px){
#sideleft,#sideright
{
padding-bottom:0!important;
margin-bottom:0!important;
}
#sideleft:before,#sideright:before
{
content:'[DONOTLEAVEITISNOTREAL]';
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;}





Head




sideleft


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


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


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


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


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


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


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


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




sideright


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


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


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


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





Footer

制作：网页陶吧







varnow=newDate();
document.write("");

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-170px00;
background:#F0F0F0;
}

xhtml代码：






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

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

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

演示：





Equalheight(DIV+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:0auto;
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;
}
/*easyclearing*/
#wrap:after
{
content:'[DONOTLEAVEITISNOTREAL]';
display:block;
height:0;
clear:both;
visibility:hidden;
}
#wrap
{
display:inline-block;
}
/**/
#wrap
{
display:block;
}
/*endeasyclearing*/
/**/
#sideleft,#sideright
{
padding-bottom:32767px!important;
margin-bottom:-32767px!important;
}
@mediaalland(min-width:0px){
#sideleft,#sideright
{
padding-bottom:0!important;
margin-bottom:0!important;
}
#sideleft:before,#sideright:before
{
content:'[DONOTLEAVEITISNOTREAL]';
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;}





Head




sideleft


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


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


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


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


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


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


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


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



sideright


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


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


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


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





Footer

制作：网页陶吧







varnow=newDate();
document.write("");

相关推荐

文章分类

经验交流 基础教程 VML相关

热门关键词

雪佛兰 通用 奢华 劳斯莱斯 旗舰版 64位 收藏夹 解调器 网卡 网线 分辨率 家电 4k 显示器 header USER_AGENT 色彩 图形 商业 生成

热门文章

最新更新

网站首页 　|　关于我们 　|　免责声明 　|　广告合作 　|　联系我们
Copyright @ 2015-2024 福编程 fuphp All Rights Reserved.
豫ICP备15036959号-4