Question

当用户缩放窗口时，我们使用填充上的百分比技巧将宽高比保持为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上的填充确定的，所以我们需要将div设置为边框。到现在为止还挺好。当试图在div上使用最小高度时，这是有效的。然而，这个div的最大高度由于某种原因不起作用。

.div {
    max-height: 60px;
}

我创造了一个小提示，告诉你我的意思：http://jsfiddle.net/UxuEB/3/。

在Chrome，FF和IE上测试过。有人可以告诉我我做错了什么或为什么这不能按预期工作？

Answer 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/

Answer 2

属性max-height适用于该元素的height，您希望在height和padding-bottom上使用它。

我认为你对box-sizing属性感到困惑，它将元素高度更改为总高度，包括填充顶部和底部（也是我）。但事实并非如此，您将在jsFiddle示例中看到。

一个例子：

内容元素的高度为100px。
max-height设置为50px（元素现在为50px高度。）
现在我们应用padding-bottom 100px（超过元素的高度）。 100px的填充添加到元素的总高度150px。

JsFiddle示例：clicky

Answer 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%;
}

Answer 4

Mike的答案（以及Brad的答案-尽管可以结合Brad的技术以减少容器级别的数量）的局限性在于它需要溢出：隐藏-在我的用例（以及许多其他情况）中，a重大限制。

我已经重新整理了他的示例以使其工作不溢出：隐藏；使用额外的级别和绝对定位。

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

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

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

只要您可以添加一些DOM元素，就可以在几乎所有浏览器的所有情况下使用它。

Answer 5

Min-height属性定义当高度仅取决于填充而max-height不取决于填充时的高度。

不知道为什么，但是现在到2020年，最小和最大css单位会根据需要完成出色的工作。

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

因此，当20％大于60px时，它将被限制为60px（最小）。

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

5 个答案: