uniapp 设置div最小高度为100%

uniapp yekong 67℃

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 都会至少占满整个浏览器窗口的高度。

喜欢 (0)