未设置带填充的边框框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;
}

我创建了一个小提琴,告诉你我的意思: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-bottomof 100px(超过元素的高度).填充100px被添加到制作它的元素的总高度150px.

JsFiddle示例:clicky

Answer 3

从Mike的答案扩展，可以使用单个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%;
}