Vue.js 3中如何用Bulma让自定义背景始终铺满全屏？

• 别用固定的height: 100vh，换成min-height: 100vh，这样内容不够时容器自动占满整个视口高度，内容超过视口时容器会跟着内容自动拉长，背景也能跟着覆盖到底。
• 把你的自定义背景样式，直接加到根容器（带container is-fluid的那个元素）或者<body>上。可以写个自定义CSS类，比如：

.full-background {
  min-height: 100vh;
  /* 替换成你的背景设置，比如： */
  background-color: #f0f0f0;
  /* 或者背景图片： */
  /* background-image: url('你的图片路径'); */
  /* background-size: cover; */
}

然后把这个类加到根容器上：<div class="container is-fluid full-background">

• 顺带检查下<body>有没有默认margin，要是有的话加一行body { margin: 0; }，避免页面边缘出现白边。

之前用100vh出问题的原因很简单：固定高度会把容器锁死在当前视口高度，内容超过后会溢出容器，背景自然就停在100vh的位置，后面的内容就露白了。用min-height就刚好解决这个矛盾——既保证内容少的时候背景铺满屏幕，又能在内容多的时候跟着延伸。

内容的提问来源于stack exchange，提问作者JOWai