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

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

我创建了一个 fiddle 来向您展示我的意思: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%;
}

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

参见 fiddle :http://jsfiddle.net/UxuEB/7/