[CSS]使⽤绝对定位属性来实现CSS内部⼦容器⾼度随着外部
⽗容器⾼度变化⽽变化
测试demo 源代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<title></title>
<style>
html,
body{
height:100%;
padding:0;
margin:0;
}
.div1{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
min-height:400px;
background:red;
}
.div2{
height:100%; /*e8下 div->b的⾼度并没有撑满整个div->a容器*/
background:#abb904;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
现象1： ⽗容器存在min-height ，⽗容器⾼度使⽤position:absolute；来确定
缩放屏幕⾄div1的⾼度出现滚动条
正常浏览器下，div1，div2的⾼度都是400px（图1）
IE8中，div1是以min-height:400px显⽰的。div2 的⾼度等于屏幕的⾼度（图2）
图1
图2
现象2  修改div2的⾼度height为auto 时
div1仍然是以min-height来读取⾼度，div2 的⾼度为 0
.div1{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
min-height:400px;
background:red;
}
.div2{
height:auto;
background:green;
}
现象3⽗容器存在min-height ，⽗容器⾼度使⽤position:relative；来设置，结果同现象2是⼀样的。
.
div1{
position:relative;
min-height:400px;
background:red;
}
.div2{
height:100%;
background:#abb904;
}
div2 正确显⽰时
css应该⽤position:absolute；来设置他的⾼度，如下代码正解1
.
div1{
position:absolute;
top:0;
css中的position属性right:0;
left:0;
bottom:0;
min-height:400px;
background:red;
}
.div2{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:green;
}
正解2：
.a{
position:relative;
min-height:400px;
background:red;
}
.b{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:#abb904;
}
总结：让⼦容器⾼度跟随外部⽗容器⾼度变化⽽变化，如果我们纯粹使⽤使⽤height:100%；或者height:auto；来定义内部容器⾃适应⾼度，貌似都⽆法实现让
⼦容器⾼度随着外部⽗容器⾼度变化⽽变化，所以我们必需要使⽤position绝对定位属性来配合协助实现。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。