左侧容器高度随着右侧容器的高度改变而改变

最新推荐文章于 2022-09-30 15:08:31 发布

ServerWang

最新推荐文章于 2022-09-30 15:08:31 发布

阅读量1.6k

点赞数

分类专栏： CSS探讨

CSS探讨专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>MJBlog(mj.588cy.com)</title> 
    <style type="text/css"> 
    * {margin:0;padding:0;font-size:12px;list-style:none;border:0;} 
    body{font-family: Arial, Helvetica, sans-serif; background-color:#edf0eb;} 
    a{ text-decoration:none;} 
    a:hover{ text-decoration:underline;} 
    .clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;} 
    .box{ width:960px; margin:20px auto; height:auto; background-color:#FFFFFF; position:relative;} 
    .left{ width:160px; height:100%; background-color:#fafafa; position:absolute; top:0px; left:0px;} 
    .left_wu{ width:160px; height:100%; background-color:#fafafa; float:left;} 
    .left h1,.left_wu h1{ width:160px; height:30px; background-color:#67a727; text-align:center; line-height:30px; color:#FFFFFF; font-size:14px; margin-top:30px;} 
    .nav{ width:160px; height:auto; margin:12px 0px;} 
    .nav a{ width:160px; height:30px; line-height:30px; text-align:center; display:block; color:#588c0e;} 
    .nav a:hover{ background-color:#ebebeb;} 
    .nav .a_dq{ color:#333333; background-color:#ebebeb; font-weight:bold;} 
     
    .right{ width:800px; height:auto; float:right;} 
    .right h1{ width:800px; height:500px; text-align:center; line-height:100px; font-size:14px; font-weight:100;} 
    </style> 
    </head> 
     
    <body> 
    <div class="box"> 
    <div class="right"> 
    <h1>这个是有使用position绝对定位属性，所以左边的导航栏高度会随着父容器高度而变化</h1> 
    </div> 
     
    <div class="clear"></div> 
    <div class="left"> 
    <h1>个人资料</h1> 
    <div class="nav"> 
    <a href="#" class="a_dq">基本信息</a> 
    <a href="#">修改头像</a> 
    <a href="#">帐号绑定</a> 
    <a href="#">个性签名</a> 
    </div> 
    </div> 
    </div> 
     
    <div class="box"> 
    <div class="left_wu"> 
    <h1>个人资料</h1> 
    <div class="nav"> 
    <a href="#" class="a_dq">基本信息</a> 
    <a href="#">修改头像</a> 
    <a href="#">帐号绑定</a> 
    <a href="#">个性签名</a> 
    </div> 
    </div> 
    <div class="right"> 
    <h1>这个是没有使用position绝对定位属性，所以左边的导航栏高度没有随着父容器高度而变化，视觉效果就会差点</h1> 
    </div> 
     
    <div class="clear"></div> 
    </div> 
    </body> 
    </html>

本方法主要的精髓在于父容器设置position:relative 左侧子容器设置absolute height:100%，这样就可以在父容器高度自适应的同时，左侧容器的高度也能随之改变，适用于左侧导航，右侧为内容区的情况。

ServerWang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左侧容器高度随着右侧容器的高度改变而改变

MJBlog(mj.588cy.com) * {margin:0;padding:0;font-size:12px;list-style:none;border:0;} body{font-family: Arial, Helvetica, sans-serif; background-color:#edf0eb;} a{ text-decoration:
复制链接

扫一扫