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

我们使用填充的百分比技巧在用户缩放窗口时将高宽比保持为div。像这样：带填充的边框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上对此进行了测试。有人可以告诉我我做错了什么，或者为什么这不能按预期工作？

来源

2014-02-13 Iggy van Lith

重复的问题。文档类型是问题 - 你需要一个。看到这篇文章 http://stackoverflow.com/questions/520710/css-max-height-not-working – magi182

此doctype设置。无论是在我的页面还是在小提琴中，所以我不认为这是问题所在。 –

属性max-height适用于元素的height，并且您想在height和padding-bottom上使用它。

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

一个例子：

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

的jsfiddle例如：clicky

来源

2014-02-13 13:55:42

根据w3 http://www.w3.org/TR/css3-ui/#box-sizing，当边框被设置时，高度应该通过从高度减去边框宽度和填充来计算。最小高度确实如我所料，为什么最大高度不起作用？有什么不同？ –

我想我现在明白了。更多地阅读规范。完全如您所说，箱体尺寸属性不会将元件高度改变为整体高度。在通常情况下，它看起来像这样工作，但在这种情况下它不会。高度通常由填充和边框减去，但现在高度为0并且不能小于0，所以填充保持定义此div的高度。这也是最小高度确实有效的原因，它使得总高度高于0而不是低于0。感谢您的解释。有关如何解决我的问题的任何想法？ –

那么我和同事讨论过，我们没有找到你的案子的真实答案，因为填充的百分比使得它很难，很抱歉。关于最小高度;在你的例子中的工作是因为填充（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/

来源

2015-07-07 14:51:27

正是我所期待的。谢谢！ – MatthewLee

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

回答

相关问题