CSS使用填充保持100vh工作准确

Question

我正在使用一个css类，使用

将高度设置为整个视口高度

.fullheight { min-height: 100vh }

但是，页面顶部有一个导航栏，我想使用填充为其保留空间

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