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

We use the percentage trick on paddings to keep aspect ratio to a div when the user scales his window. Like this:

当用户缩放窗口时,我们使用填充上的百分比技巧将宽高比保持为div。喜欢这个:

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

Now we would like to be able to set a maximum height to this div. Because the height of the div is determined by the padding on the div we would need the div to be border-boxed. So far so good. When trying to use a min-height on the div, this works. The max-height on this div however does not work for some reason.

现在我们希望能够为此div设置最大高度。因为div的高度是由div上的填充确定的,所以我们需要将div设置为边框。到现在为止还挺好。当试图在div上使用最小高度时,这是有效的。然而,这个div的最大高度由于某种原因不起作用。

.div {
    max-height: 60px;
}

I created a fiddle to show you what i mean: http://jsfiddle.net/UxuEB/3/.

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

Tested this on Chrome, FF and IE. Can somebody tell me what I'm doing wrong or why this doesn't work as expected?

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

3 个解决方案

#1

The property max-height works on the height of the element and you want to use it on the height and padding-bottom.

max-height属性适用于元素的高度,您希望在高度和填充底部使用它。

I think you are confused by the box-sizing property that it changes the element height to the overal height including the padding top and bottom (also me). But this is not the case as you will see in the jsFiddle example.

我认为你对盒子尺寸属性感到困惑,它将元素高度更改为整个高度,包括填充顶部和底部(也是我)。但事实并非如此,您将在jsFiddle示例中看到。

An example:

The element with content is 100px in height.

内容元素的高度为100px。

The max-height is set to 50px (element is now 50px in height).

max-height设置为50px(元素现在高度为50px)。

Now we apply the padding-bottom of 100px (more then the height of the element). The padding of 100px is added to the total height of the element making it 150px.

现在我们应用100px的填充底部(超过元素的高度)。将100px的填充添加到元素的总高度,使其为150px。

JsFiddle example: clicky

JsFiddle示例:clicky

#2

I realize this answer comes incredibly late to the party but I was trying to solve this exact same thing today and this question is the first result in Google. I ended up solving it with the below code so hopefully that will help someone out in the future.

我意识到这个答案来得非常晚,但我今天试图解决这个问题,这个问题是谷歌的第一个结果。我最终用下面的代码解决了这个问题,所以希望将来可以帮助某些人。

First, add an extra inner div:

首先,添加一个额外的内部div:

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

And set the padding on that while hiding the overflow on the outer 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%;
}

This obviously assumes you're fine with hiding part of the inner element when it overflows. In my case that wasn't a problem because the inner element is just an empty link element to make the whole thing clickable and the outer element just has a centered background image and a border set.

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

See fiddle: http://jsfiddle.net/UxuEB/7/

请参阅小提琴:http://jsfiddle.net/UxuEB/7/

#3

Extending from Mike's answer, the same can be achieved with a single DOM element & a pseudo element, eg.

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

#1