未设置带填充的边框 div 的最大高度答案

【问题标题】：Max-height on border-boxed div with padding is not set未设置带填充的边框 div 的最大高度
【发布时间】：2020-11-11 15:19:10
【问题描述】：

当用户缩放窗口时，我们使用填充百分比技巧来保持 div 的纵横比。像这样：

.div {
    background: red;
    width: 80%;
    margin: 0 auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 20%;
}

现在我们希望能够为这个 div 设置一个最大高度。因为 div 的高度是由 div 上的 padding 决定的，所以我们需要将 div 加边框。到目前为止，一切都很好。当尝试在 div 上使用最小高度时，这是可行的。但是，由于某种原因，此 div 的最大高度不起作用。

.div {
    max-height: 60px;
}

我创建了一个小提琴来告诉你我的意思：http://jsfiddle.net/UxuEB/3/。

在 Chrome、FF 和 IE 上对此进行了测试。谁能告诉我我做错了什么或者为什么这不能按预期工作？

【问题讨论】：

重复问题。 Doctype 是问题所在——你需要一个。看这篇文章stackoverflow.com/questions/520710/css-max-height-not-working
此文档类型已设置。在我的页面和小提琴中，所以我认为这不是问题。

标签： css

【解决方案1】：

我意识到这个答案来得太晚了，但我今天试图解决同样的问题，这个问题是谷歌的第一个结果。我最终用下面的代码解决了这个问题，希望将来能帮助别人。

首先，添加一个额外的内部 div：

<div class="control control-max-height">
  <div class="control-max-height-inner">
    Max-height
  </div>
</div>

并在其上设置填充，同时隐藏外部 div 上的溢出：

.control {
    background: red;
    width: 80%;
    margin: 0 auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.control-max-height {
    max-height: 120px;
    overflow: hidden;
}

.control-max-height-inner {
    padding-bottom: 20%;
}

这显然假设您可以在溢出时隐藏部分内部元素。在我的情况下，这不是问题，因为内部元素只是一个空链接元素，以使整个内容可点击，而外部元素只有一个居中的背景图像和一个边框集。

见小提琴：http://jsfiddle.net/UxuEB/7/

【讨论】：

正是我想要的。谢谢！
overflow: hidden; 是我缺少的部分。谢谢！

【解决方案2】：

属性max-height 作用于元素的height，您想在height 和padding-bottom 上使用它。

我认为您对 box-sizing 属性感到困惑，因为它将元素高度更改为包括顶部和底部填充在内的整体高度（也是我）。但这不是您将在 jsFiddle 示例中看到的情况。

一个例子：

内容元素的高度为100px。
max-height 设置为 50px（元素现在的高度为 50px）。
现在我们应用100px 的padding-bottom（大于元素的高度）。 100px 的内边距添加到元素的总高度，使其成为 150px。

JsFiddle 示例：clicky

【讨论】：

根据 w3 w3.org/TR/css3-ui/#box-sizing，当设置了边框框时，高度应该通过从高度中减去边框宽度和填充来计算。 min-height 确实如我所料，为什么 max-height 不起作用？有什么区别？
我想我现在明白了。多阅读规范。正如您所说， box-sizing 属性不会将元素高度更改为整体高度。在通常情况下，它似乎确实像那样工作，但在这种情况下却没有。高度通常被填充和边框减去，但现在高度为 0 并且不能小于 0，因此填充继续定义此 div 的高度。这也是 min-height 起作用的原因，它使总高度高于 0 而不是更少。谢谢你的解释。关于如何解决我的问题的任何想法？
好吧，我与同事讨论过，但我们无法为您的情况找到真正的答案，因为填充中的百分比使其变得困难，抱歉。关于最小高度；您示例中的那个有效，因为填充 (1%) 小于元素的最小高度。

【解决方案3】：

从 Mike 的 answer 扩展而来，同样可以使用单个 DOM 元素和伪元素来实现，例如。

html:

<div class="le-div"></div>

css:

div.le-div {
  max-height: 200px;
  /* ? only necessary if applying any styles to the pseudo element
     other than padding:

     overflow: hidden;
  */

}

div.le-div::before {
  content: '';
  display: block;
  padding-bottom: 60%;
}

【讨论】：

这应该是被接受的答案，试了一下，效果很好，谢谢
是的，填充是主要问题。
我喜欢用margin而不是padding来使用这个技巧，这样它就可以与内容元素的margin一起折叠。

【解决方案4】：

Min-height 属性定义高度仅依赖于 padding 而 max-height 不依赖时的高度。

不知道为什么，但现在在 2020 年，最小和最大 css 单位可以满足我们的需要。

.classthatshoulddefineheight {
   padding-bottom: min(20%, 60px); 
}

所以当 20% 变得大于 60px 时，它将被限制为 60px（它们的最小值）。

【讨论】：

【解决方案5】：

Mike 的回答（以及这个 Brad 的回答——尽管 Brad 的技术可以用来减少容器级别的数量）的局限性在于它需要溢出：隐藏——在我的用例中（以及在许多其他用例中）重大限制。

我已经修改了他的示例，使其不会溢出：隐藏；使用附加级别和绝对定位。

http://jsfiddle.net/2ksh56cr/2/

诀窍是在内盒内添加另一个容器，使其绝对定位，然后将最大高度也添加到该容器：

.inner-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 120px;
}

只要您对一些额外的 DOM 元素感到满意，这应该适用于或多或少所有浏览器的所有场景。

【讨论】：