uniapp小程序开发中,整体背景色都为灰色,这里我们通过给div设置背景色实现,但是div高度最小要和页面一样高,这时候我们就需要设置一个最小高度了。
要设置 .pageBody
的高度为最小100%,你可以在 .pageBody
的样式中添加 min-height: 100vh;
。这样可以确保 .pageBody
的高度至少与视口的高度一致,即使内容不足以填满整个屏幕也能保持背景覆盖整个屏幕。以下是修改后的样式代码:
.pageBody {
background: rgba(245, 246, 249, 1);
width: 100%;
min-height: 100vh; // 设置最小高度为视口高度
}
这段代码中的 100vh
表示100%的视口高度(Viewport Height),这是一个非常实用的单位,特别适合制作全屏页面或者确保某个元素至少有视口高度那么高。添加 min-height: 100vh;
后,无论内容多少,.pageBody
都会至少占满整个浏览器窗口的高度。