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