当父元素具有最小高度/最大高度值但没有高度值时，为什么子元素的 height: 100% 不适用? [英] Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?

查看：32
本文介绍了当父元素具有最小高度/最大高度值但没有高度值时，为什么子元素的 height: 100% 不适用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我们有以下设置:

.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' 属性的使用值:

  1. 根据计算高度和边距"下的规则计算暂定使用的高度(没有最小高度"和最大高度").
  2. 如果此暂定高度大于max-height"，则再次应用上述规则，但这次使用max-height"的值作为height"的计算值.
  3. 如果结果高度小于'min-height'，则再次应用上述规则，但这次使用'min-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:

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

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

The following algorithm describes how the two properties influence the used value of the 'height' property:

  1. The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
  2. If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
  3. If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for '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% 不适用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆