CSS让内部容器高度随着父容器高度变化的解决办法 -

CSS让内部容器高度随着父容器高度变化的解决办法

作者：MJ 发布于：2012-11-8 7:58 Thursday 分类：Css

使用position绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化效果，我们在重构页面时间经常会碰到使用一个外部大容器里面放置两个左右浮动容器的布局，有时候为了视觉效果，我们需要让里面两个子容器的高度必须保持一致，但是在无法确定的容器具体高度的情况下（因为DIV容器经常需要根据里面内容的多少来自定义高度），那么我们唯一的办法就是让里面的容器高度跟随外部父容器高度变化而变化，但是我们如果我们纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度，貌似都无法实现让内部容器高度随着外部父容器高度变化而变化，所以我们必需要使用position绝对定位属性来配合协助实现。

请看下面案例：这个左边导航div高度会随着外部box父div的高度变化而变化，而box父div高度是根据里面那个右边div中的内容多少而自适应变化。

<!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>

标签: 自定义高度

« SEO发布外链渠道情况 | display:inline-block的深入理解»

blogger
分类
- MJ分享(5)
- JQuery(23)
- Css(16)
- Html5(1)
- PHP(20)
- Seo优化(3)
最新碎语
- 佛曰：命由己造，相由心生，世间万物皆是化相，心不动，万物皆不动，心不变，万物皆不变。
  2012-10-24 02:01
- 佛曰：人生有八苦：生、老、病、死，爱别离，怨长久，求不得，放不下！
  2012-10-24 01:59
- 佛曰：笑着面对，不去埋怨。悠然，随心，随性，随缘。注定让一生改变的，只在百年后，那一朵花开的时间。
  2012-10-24 01:56
- 裤子尺码：腰围29（2.23尺/75-76cm）前档24-25cm 大腿48-50cm 小腿32-33cm 裤长95cm
  2012-10-17 15:49
- WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。
  2012-09-02 15:34
搜索
随机日志
链接

CSS让内部容器高度随着父容器高度变化的解决办法

blogger

分类

最新碎语

搜索

随机日志

链接