相关文章
购买虚拟主机应注意的几点
站长教程:如何把个人网站运营成功
如何提高你的博客浏览量
网站设计你应该知道的CSS的十八个技巧
企通互联资讯采集
网站建设Dreamweaver 8图文快报2
北京网页设计FLASH中变量与影片剪辑的命名讲解
北京网站设计从Flash中导出透明背景的GIF动画
北京网站建设Flash MX 2004 编程(AS2.0)教程(七)
网页设计DreamWeaver,经典50问(4)
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置:首页 >> 网站制作 >> 网站制作解决列高度自适应(列高度相同)的五种方法
网站制作解决列高度自适应(列高度相同)的五种方法
1.背景图填充北京网站制作
这是使用最广泛的一种做法,无hacks,推荐使用:
北京网站制作
2.采用脚本控制列的高度(一)网站制作
需要事先知道哪列的高度,以此为基准用脚本控制。
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"北京网站制作
上面的代码是以sideright的基准高度来控制sideleft的高度。
代码简单,但比较被动:
网站设计
3.采用脚本控制列的高度(二)网页设计
不需要事先知道哪列的高度,脚本自动判断。
代码较复杂,有点延时:
北京网站设计
4.采用负的外边界和内补丁相结合北京网站设计
不需要事先知道哪列的高度。
hacks比较多(主要是opera的),但容易使用,推荐:
网站设计
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> |
从结构看, www.qitongnet.commiddle(使用的是左列希望的背景色)在最外面,宽度等于sideleft的宽度,往里一层是sideright,其宽度为170px,浮动方向是右边。但其右面的边界是负的170px,相当于将sideright拉向右面(右面紧贴着middle的右边)170px的位置。而sideleft又是套在sideright里面的,其内容先于sideright出来,左边界是负的580,相当于在sideright左边580px,此时sideleft和middle位置重合。
优点:不需要背景图片,无 北京网站制作hacks,完全的自适应高度。
缺点:现在的代码只能左对齐。
演示:
北京网站制作
网站设计