网页左侧的高度跟随右边内容而定[网页布局]

作者: unvs 分类: Web前端 发布时间: 2011-05-15 13:21 ė14,585 views 63条评论

有些朋友,在页面设计布局过程中,碰到这么一个问题,左侧是导航,右侧是内容,但想左边的高度想跟随右边的内容高度而定,当左侧背景为白色还好,关键若是图片或是其它颜色,那就没那么简单了,以下图为例:(这里说的都是用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 条评论

  1. 混子 2011 年 5 月 15 日 下午 7:19 回复

    谢谢分享,好东西

    cyheng 于 2011-05-19 01:00:26 回复

    方法仅供参考学习,O(∩_∩)O~

  2. 不孕不育专业医院 2011 年 6 月 7 日 上午 1:12 回复

    多多指教

  3. 2012 年 12 月 8 日 下午 7:04 回复

    这样不行呀 请指教 QQ 528479081

    cyheng 于 2012-12-10 20:30:02 回复

    您好,麻烦详细说明下哪里不行?

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部