未设置带边框的边框div的最大高度 [英] Max-height on border-boxed div with padding is not set

问题描述

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

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

.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上的max-height无法正常工作.

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 {
    max-height: 60px;
}

我创建了一个小提琴来向您展示我的意思: http://jsfiddle.net/UxuEB/3/.

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

在Chrome，FF和IE上对此进行了测试.有人可以告诉我我在做什么错吗，或者为什么这不能按预期进行?

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

推荐答案

属性max-height在元素的height上起作用，并且您想在height和padding-bottom上使用它.

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

我认为您对box-sizing属性感到困惑，因为它会将元素高度更改为包括填充顶部和底部(也是我)的总高度.但是事实并非如此，正如您将在jsFiddle示例中看到的那样.

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.

一个例子:

• 内容元素的高度为100px.
• max-height设置为50px(元素的高度现在为50px).
• 现在，我们应用100px的padding-bottom(然后是元素的高度). 100px的填充被添加到元素的总高度中，从而使其成为150px.

• The element with content is 100px in height.
• The max-height is set to 50px (element is now 50px in height).
• 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.

JsFiddle示例: clicky

JsFiddle example: clicky

这篇关于未设置带边框的边框div的最大高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！