假设我们有以下设置:
.container {背景颜色:红色；宽度:500px；最小高度:300px；}.孩子 {背景颜色:蓝色；宽度:500px；高度:100%；}<div class="child">很明显，container 元素渲染的高度设置为 300px，但是 child 元素没有任何高度，尽管设置为 100%.
当container元素的高度设置为偶数1px时，child元素会突然填满整个container 高度为 300px.
.container {背景颜色:红色；宽度:500px；最小高度:300px；高度:1px；}.孩子 {背景颜色:蓝色；宽度:500px；高度:100%；}<div class="child">即使没有设置高度，container 元素也清晰地呈现在 300px 上，为什么它需要在 child 元素之前实际设置高度应用它的 height: 100%?
明确地说，我不是在寻找让子高度占据整个父元素的解决方案，我只是想了解为什么会这样.
在第一种情况下，您没有定义任何高度，因此很明显子级的百分比高度将失败.
来自规范:
指定百分比高度.该百分比是根据生成的框的包含块的高度计算的.如果包含块的高度没有明确指定(即，它取决于内容高度)，并且该元素不是绝对定位的，则该值计算为'auto'.
min-height 只是一个边界，元素的高度仍然取决于它的内容.如果您有一个超过 300px 的元素，则该元素将超过 300px
.container {背景颜色:红色；宽度:500px；最小高度:300px；填充:10px；}.孩子 {背景颜色:蓝色；宽度:500px；高度:400px；动画:改变2s线性无限交替；}@关键帧变化{从 {高度:100px；}}<div class="child">在第二种情况下，您指定了一个高度，因此百分比将起作用，但高度计算有点棘手，因为我们还有 min-height
以下算法描述了这两个属性如何影响 'height' 属性的使用值:
在第二种情况下，就像你明确定义了 height:300px 并且百分比会考虑这个值.在这种情况下，即使内容更大，父元素也不会增长，并且会溢出.您甚至可以定义一个等于 0 的高度.
.container {背景颜色:红色；宽度:500px；最小高度:300px；高度:0；填充:10px；}.孩子 {背景颜色:蓝色；宽度:500px；高度:400px；动画:改变2s线性无限交替；}@关键帧变化{从 {高度:100px；}}<div class="child">max-height 也会发生同样的逻辑，但在这种情况下，高度需要非常大
.container {背景颜色:红色；宽度:500px；最大高度:300px；高度:99999px；填充:10px；}.孩子 {背景颜色:蓝色；宽度:500px；高度:400px；动画:改变2s线性无限交替；}@关键帧变化{从 {高度:100px；}}<div class="child">如果您有兴趣，您可以使用 flexbox 转换您的逻辑，您将能够做您想做的事，而无需设置明确的高度.
依赖横轴上的默认拉伸对齐
.container {背景颜色:红色；宽度:500px；最小高度:300px；显示:弹性；}.孩子 {背景颜色:蓝色；宽度:500px；/* 高度:100%;*/}<div class="child">或者使用 flex-grow 属性代替主轴的高度:
.container {背景颜色:红色；宽度:500px；最小高度:300px；显示:弹性；弹性方向:列；}.孩子 {背景颜色:蓝色；宽度:500px；弹性增长:0.8；/* 这是 80%，使用 1 表示 100% */}<div class="child">CSS 网格也可以处理这个
.container {背景颜色:红色；宽度:500px；最小高度:300px；显示:网格；网格模板行:1fr；}.孩子 {背景颜色:蓝色；宽度:500px；高度:80%；}<div class="child">Say we have the following set up:
.container {
background-color: red;
width: 500px;
min-height: 300px;
}
.child {
background-color: blue;
width: 500px;
height: 100%;
}<div class="container">
<div class="child">
</div>
</div>It's clear that the container element is rendering with a height set to 300px, but the child element has no height whatsoever, despite being set to 100%.
When the height of the container element is set to even 1px, the child element will suddenly fill the entire container with a height of 300px.
.container {
background-color: red;
width: 500px;
min-height: 300px;
height: 1px;
}
.child {
background-color: blue;
width: 500px;
height: 100%;
}<div class="container">
<div class="child">
</div>
</div>The container element is clearly rendering at 300px even without height being set so why does it require setting the height before the child element actually applies it's height: 100%?
Edit: To be clear, I'm not looking for a solution to having the child height take up the entire parent element, I would just like to understand why this behaves like this.
In the first case, you don't have any height defined so it's clear that the precentage height on child will fail.
From the specification:
min-height is only a boundary and the height of your element still depend on its content. If you will have one that exceed 300px the element will have more than 300px
.container {
background-color: red;
width: 500px;
min-height: 300px;
padding:10px;
}
.child {
background-color: blue;
width: 500px;
height: 400px;
animation:change 2s linear infinite alternate;
}
@keyframes change{
from {
height:100px;
}
}<div class="container">
<div class="child">
</div>
</div>In the second case you have specified a height so the precentage will work but the height calculation is a bit tricky since we also have min-height
In the second case, it's like you explicitely defined height:300px and percentage will consider this value. In this situation, even if the content is bigger the parent element will not grow and you will have overflow. You can even define a height equal to 0.
.container {
background-color: red;
width: 500px;
min-height: 300px;
height: 0;
padding:10px;
}
.child {
background-color: blue;
width: 500px;
height: 400px;
animation:change 2s linear infinite alternate;
}
@keyframes change{
from {
height:100px;
}
}<div class="container">
<div class="child">
</div>
</div>Same logic will happen with max-height but in this case the height need to be very big
.container {
background-color: red;
width: 500px;
max-height: 300px;
height: 99999px;
padding:10px;
}
.child {
background-color: blue;
width: 500px;
height: 400px;
animation:change 2s linear infinite alternate;
}
@keyframes change{
from {
height:100px;
}
}<div class="container">
<div class="child">
</div>
</div>If you are intrested you can transform your logic using flexbox and you will be able to do what you want without having to set an explicit height.
Relying on the default stretch alignment on the cross-axis
.container {
background-color: red;
width: 500px;
min-height: 300px;
display:flex;
}
.child {
background-color: blue;
width: 500px;
/* height: 100%;*/
}<div class="container">
<div class="child">
</div>
</div>Or using the flex-grow property instead of height in main axis:
.container {
background-color: red;
width: 500px;
min-height: 300px;
display:flex;
flex-direction:column;
}
.child {
background-color: blue;
width: 500px;
flex-grow:0.8; /* this is 80%, use 1 for 100% */
}<div class="container">
<div class="child">
</div>
</div>CSS grid can also handle this
.container {
background-color: red;
width: 500px;
min-height: 300px;
display:grid;
grid-template-rows:1fr;
}
.child {
background-color: blue;
width: 500px;
height:80%;
}<div class="container">
<div class="child">
</div>
</div>这篇关于当父元素具有最小高度/最大高度值但没有高度值时，为什么子元素的 height: 100% 不适用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！