网页左侧的高度跟随右边内容而定[网页布局]
有些朋友,在页面设计布局过程中,碰到这么一个问题,左侧是导航,右侧是内容,但想左边的高度想跟随右边的内容高度而定,当左侧背景为白色还好,关键若是图片或是其它颜色,那就没那么简单了,以下图为例:(这里说的都是用div+css进行页面布局)
上面图示应该比较容易看懂,高度变更区域,就是指根据右边内容的高度,而进行高低缩放。。。
可能方法比较多,下面是我总结的方法,仅供学习:
定义三个层z_body、z_left、z_right,页面布局如下:
<div class="z_body">
<div class="z_left">
<ul>
<li>网页布局</li>
<li>网页设计</li>
<li>网站建设</li>
</ul>
</div>
<div class="z_right">
网页左侧的高度跟随右边内容而定
</div>
</div>
样式如下:
.z_body
{
width: 550px;
height: auto; //body高度设为自动
overflow: hidden; //流动,超出隐藏,这点很重要,如果没有,背景效果在ie6里面出不来
background-image: url(l_bg.png); //这点是关键,做一张左侧一样宽的背景图片(如果左侧背景是图片,直接放进去,如果是单个颜色,那么做一个宽度一样,高1px图片即可)
background-repeat: repeat-y; //进行竖向平铺
border-top: #999 1px solid;
}
.z_left //这个应该就比较简单了,左侧的样式,高度设为自动,因为有可能高度根据导航的数目而变动
{
width: 200px;
height: auto;
overflow: hidden;
float: left;
line-height: 20px;
margin-top: 20px;
}
.z_right //右侧层的样式
{
width: 350px;
float: left;
margin-top: 10px;
color: #333232;
}
好了,就是这么简单,注意两个地方就行
本博文章基本上属于原创或收集整理,都是心血结晶。
欢迎转载分享,转载请注明出处,谢谢!
本文地址:网页左侧的高度跟随右边内容而定[网页布局]
3 条评论
谢谢分享,好东西
多多指教
这样不行呀 请指教 QQ 528479081