纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度，都无法实现让内部容器高度随着外部父容器高度变化而变化，所以我们必需要使用position绝对定位属性来配合协助实现。

//.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;}

//.right{ width:800px; height:auto; float:right;} 

<!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:;padding:;font-size:12px;list-style:none;border:;}

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:%; background-color:#fafafa; position:absolute; top:0px; left:0px;}

.left_wu{ width:160px; height:%; 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:#; 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:;}

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

关于div自适应高度/左右高度自适应一致的js代码

$(function(){

    var heightLeft= $("#Left").height();

    var heightRight= $("#Right").height();

    if (heightLeft > heightRight)

    {

        $("#Right").height(heightLeft);

    }

    else

    {

        $("#Left").height(heightRight);

    }

    })

CSS实现子级窗口高度随低级窗口高度变化的更多相关文章

  1. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  2. CSS实现子级窗口高度随低级窗口高度变化及js控制左右容器高度一致

    纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度,都无法实现让内部容器高度随着外部父容器高度变化而变化,所以我们必需要使用position绝对定位属性来配合协助 ...

  3. html/css更改子级继承的父级属性

    一个精美的网页需要的样式很多,在父级上设置的字体颜色或者大小,在其子元素中不一定全部相同,这时候要更改其中某一项的样式怎么办呢. 很多新手朋友就不明白,会迷惑为什么我使用class单独命名了,重新设置 ...

  4. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  5. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  6. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  7. css flew 布局 解决父元素高度不固定，子级居中。

    给父级添加 display: flex; justify-content: flex-start; align-items: center; 子级里的内容永远居中

  8. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  9. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

随机推荐

  1. 关于fft的一点总结

    好吧,其实我并没有深入运用fft,只会优化卷积 听说fft经常和生成函数结合在一起………………oi真是迅猛发展,我真是与时代脱节了…… 关于fft的学习推荐直接去看算法导论,写得非常清楚 主要弄懂n次 ...

  2. 淘宝技术发展（Java时代：脱胎换骨）

    我的师父黄裳@岳旭强曾经说过,“好的架构图充满美感”,一个架构好不好,从审美的角度就能看得出来.后来我看了很多系统的架构,发现这个言论基本成立.那么反观淘宝前面的两个版本的架构,你看哪个比较美? 显然 ...

  3. 通过CSS禁止Chrome自动为输入框添加橘黄色边框，修改/禁止 chrome input边框颜色，

    1   /*Chrome浏览器 点击input 黄色边框 禁用*/ .NoOutLine:focus{outline: none} <asp:TextBox ID="txtTeleph ...

  4. HDU 4607 Park Visit (DP最长链)

    [题目]题意:N个城市形成一棵树,相邻城市之间的距离是1,问访问K个城市的最短路程是多少,共有M次询问(1 <= N, M <= 100000, 1 <= K <= N). [ ...

  5. Unit testing Cmockery 简单使用

    /********************************************************************** * Unit testing Cmockery 简单使用 ...

  6. SpringMVC——hello SpringMVC

    概述: Spring的web框架围绕DispatcherServlet设计. DispatcherServlet的作用是将请求分发到不同的处理器. 与其它web MVC框架一样,Spring的web ...

  7. validate.plugin.js 验证插件

    /*编写时间:2015-6-4*/ (function ($) { $.fn.isValidate = function (obj) { if ($(this).val()!="" ...

  8. [Everyday Mathematics]20150113

    设 $f\in C^2(0,+\infty)$ 适合 $$\bex \lim_{x\to 0^+}f'(x)=-\infty,\quad \lim_{x\to 0^+}f''(x)=+\infty. ...

  9. 【C++对象模型】构造函数语意学之一 默认构造函数

    默认构造函数,如果程序员没有为类定义构造函数,那么编译器会在[需要的时候]为类合成一个构造函数,而[需要的时候]分为程序员需要的时候和编译器需要的时候,程序员需要的时候应该由程序员来做工作,编译器需要 ...

  10. 教你利用iframe在网页中显示天气

    来源:http://www.ido321.com/921.html css: 1: *{margin:0;padding:0;list-style-type:none;} 2: a,img{borde ...