如何使带有填充的元素仅跨越视口高度的 100%？

Question

我正在使用 CSS class 将高度设置为完整视口高度，使用：

.fullheight { min-height: 100vh }

但是，我的页面顶部有一个导航栏，我想使用 padding

为其保留 space

.padding { padding-top: 55px }

现在，我这样格式化我的 div：

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

填充效果很好，但是 div 的高度现在当然 55px 比我的视口大。由于我使用不同的填充（取决于导航栏的形状），我正在寻找一种解决方案，使 div 的总高度保持在 100vh，而不管我使用额外 class。可能吗？

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

如何使带有填充的元素仅跨越视口高度的 100%？

How to make an element with padding only span 100% of the viewport height?

css

padding

viewport