在与后台实现交互的时候，会遇到这么一个需求：后台希望前端的网页界面高度不是定死的而是能够随着后台往界面上增加数据的时候，前端的界面就会扩展
这个时候我们前端就不能把网页的高度定死，以前就是说在最外层的盒子绝对不能出现height：xxx这样的写法。于是就要用到“父盒子的高度由子盒子撑开”这个理论，但是有时候又会遇到明明自己在父盒子里面写了东西，但是检查元素的时候发现父盒子并没有被子盒子撑开，这就是父盒子和子盒子的position定位问题了。
有些时候我们会遇到一个情况：明明父盒子里面有子盒子，但是子盒子并没有把父盒子的高度撑开。这个时候我们就应该检查一下是不是多写了position定位问题，这里举个最简单的例子：
<!DOCTYPE
html
>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<title>
test
</title>
<style>
.
container
{
width
:
100
%
;
background
:
grey
;
}
.
test
{
width
:
200
px
;
height
:
200
px
;
background
:
red
;
margin
:
0
auto
;
}
</style>
</head>
<body>
<div
class=
"container"
>
<div
class=
"test"
></div>
</div>
</body>
</html>
这里我们得到的结果是：在父盒子和子盒子都没有设置position定位的时候，父盒子的高度默认是被子盒子撑开的
并且在检查元素（也就是按f12）的时候发现父盒子container的高度确实是靠子盒子test撑开的
此时我们应该注意到的是，在父盒子container中没有定义height高度和position定位，在子盒子test中没有定义position定位
再来看一下在如果在父盒子container和子盒子test中定义position定位的话会出现什么情况：
（1）父盒子container的position：absolute，子盒子test的position：relative
.
container
{
width
:
100
%
;
background
:
grey
;
position
:
absolute
;
}
.
test
{
width
:
200
px
;
height
:
200
px
;
background
:
red
;
margin
:
0
auto
;
position
:
relative
;
}
结果：父盒子的高度依旧是由子盒子撑开，由此可见，如果父盒子的高度想要被子盒子撑开，并且两者都要设置定位的话，父盒子设置为absolute，子盒子设置为relative是没有问题的
（2）父盒子的定位设置为relative，子盒子的定位设置为absolute
.
container
{
width
:
100
%
;
background
:
grey
;
position
:
relative
;
}
.
test
{
width
:
200
px
;
height
:
200
px
;
background
:
red
;
margin
:
0
auto
;
position
:
absolute
;
}
结果：父盒子的高度不能被子盒子撑开
（3）父盒子没有设置position，子盒子的position设置为relative
.
container
{
width
:
100
%
;
background
:
grey
;
}
.
test
{
width
:
200
px
;
height
:
200
px
;
background
:
red
;
margin
:
0
auto
;
position
:
absolute
;
}
结果：父盒子的高度没有被子盒子撑开
综上所述，当我们发现自己写的父盒子的高度没有被子盒子撑开的时候，需要检查一下父盒子和子盒子的position定位问题，以下两种情况是父盒子能被子盒子撑开的
（1）父盒子和子盒子都不设置position定位
（2）父盒子的position为absolute，子盒子的position为relative
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
