CSS通过填充保持100vh工作准确[重复]

Posted 2023-03-06

【中文标题】CSS通过填充保持100vh工作准确[重复]

【英文标题】：CSS keep 100vh working accurate with padding [duplicate]

【发布时间】：2017-05-30 12:59:15

【问题描述】：

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

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

.fullheight  min-height: 100vh 

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

.padding  padding-top: 55px 

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

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

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

【参考方案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;