CSS保持100vh與填充

Question

工作精確我使用的

.fullheight { min-height: 100vh } 

但是CSS類，設置高度充分視口的高度，對我的頁面頂部導航欄，我想使用填充

.padding { padding-top: 55px } 

我們保留空間，我格式化我的div像這樣：

<div class="fullheight padding"> </div> 

的填充工作正常，但當然div的高度比我的視口大55px。由於我使用不同的填充（取決於導航欄的形狀），因此我正在尋找一種解決方案，可以將div的總高度保持在100vh，而不管我使用其他類添加的填充。可能？

Answer 1

您需要使用box-sizing: border-box在div的總寬度中包含填充。所以，你的代碼看起來就像這樣：

HTML

<div class="fullheight padding"> </div> 

CSS

.fullheight { 
    min-height:   55px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing:  border-box; 
    -o-box-sizing:  border-box; 
    box-sizing:   border-box; 
} 

.padding { 
    padding-top: 55px; 
}