我正在使用一个css类，该类使用以下命令将高度设置为整个视口高度
.fullheight { min-height: 100vh }
但是，页面顶部有一个导航栏，我想使用填充来为其保留空间
.padding { padding-top: 55px }
现在，我将div的格式设置为：
<div class="fullheight padding"> </div>
填充效果很好，但是div的高度现在当然比我的视口大55px。由于我使用了不同的填充（取决于导航栏的形状），因此我正在寻找一种解决方案，将div的总高度保持在100vh，而与使用其他类添加的填充无关。可能？
您需要使用box-sizing: border-boxdiv总高度中包含填充。因此您的代码将如下所示：
的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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句