帶填充的邊框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的最大高度未設置

回答

相關問題