关于父元素设置maxHeight或minHeight,子元素高度设置%的不生效的问题
要理解这个问题,首先要搞清楚一个元素的高度是由什么决定的?如果在不额外设置高度或者行高等外加的影响高度的css样式时,一个元素的高度就是其内部元素内容的高度之和。所以元素的高度是由内向外计算的。
那如果
<div class="box">
<div class="item1">第一行内容</div>
<div class="item2">第二行内容</div>
<div class="item3">第三行内容</div>
</div>
这段代码里面,box的高度就是里面三个div高度的和
**那么height设置百分比的高度又是怎么计算的呢?**当给一个元素的高度设置成%,如height:10%,那么他的高度为父元素的高度*10%,所以要给一个元素设置%的高度,他的父元素就必须有一个明确的高度,如果父元素没有确定高度,那么子元素的高度也会无从计算
//html
<div class="box">
<div class="item1">第一行内容</div>
<div class="item2">第二行内容</div>
<div class="item3">第三行内容</div>
<div class="item4">第四行内容</div>
</div>
//css
.box{
border:1px solid black ;
}
.item1{
background-color: red;
height: 10%;
}
.item2{
background-color: yellow;
height: 20%;
}
.item3{
background-color: green;
height: 30%;
}
.item4{
background-color: blue;
height: 40%;
}
可以看到虽然给每个div设置了不一样的百分比高度,但是并没有达到想象中的效果,如果我们给父元素box设置一个高度,效果立马就出来了
.box{
border:1px solid black ;
height: 200px;
}
当前有一个需求,有下面这样一段html,当屏幕高度大于box内容高度是,wrap的高度等于内容高度,当屏幕高度小于box高度时,box的高度等于屏幕高度;由于一些其他的效果需要,必须要给box设置一个明确的高度,且等于父元素的高度height,不能不设置或者设置max-height等,这里只给出最基本的html结构。
<div class="wrap">
<div class="box">
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容
</div>
</div>
一开始看到这个需求,我想很多朋友都会想到给父元素设置max-height等于屏幕高度,子元素设置100%;咋一看或许这样就能满足需求,当内容高度不够时,高度自动撑开,当超过max-height时,高度为max-height的高度,而子元素要想和父元素一样高,给高度设置100%。
.wrap{
border: 2px solid black ;
max-height: calc(100vh - 20px); /* 这里我们剪掉html自带的边距 */
}
.box{
background-color: red;
height: 100%;
overflow: hidden;/* 为了方便观察设置超出隐藏 */
}
在上面的结果中,浏览器出现了滚动条,而且box红色的区域明显超过了wrap的黑色边框,证明我们为子元素设置的高度100%是没有生效的。前面我们说到如果给一个元素设置高度为百分比时,他的高度时父元素的高度乘百分比,而此时我们的父元素只设置了max-height,是没有确定高度的,所以子元素的高度也无法计算,默认由内容撑开了。
那我们要实现我们的需求应该怎么做呢,需要用到flex布局;
<div class="wrap">
<div class="content">
<div class="box">
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容
</div>
</div>
</div>
.wrap{
border: 2px solid black ;
max-height: calc(100vh - 20px); /* 这里我们剪掉html自带的边距 */
display: flex;
}
.content{
flex: 1;
}
.box{
background-color: red;
height: 100%;
overflow: hidden;/* 为了方便观察设置超出隐藏 */
}
我们的效果就实现了