如何设置canvas为填充背景 实现页面滚动时无空白且背景一致

问题根源 #

你遇到的滚动留白问题由三个原因共同导致：

1. .background 使用position: absolute定位，高度设为100%时只会继承父元素的高度，若父元素高度仅等于视口高度，页面内容超出视口滚动时，背景区域不会跟随延伸，就会露出底层的白色背景
2. Canvas尺寸设置为screen.height/screen.width，仅匹配你当前显示器的物理尺寸，页面实际渲染高度超出该值时，Canvas下方就没有绘制内容，直接露白
3. Firefox对绝对定位元素的百分比高度计算逻辑和Chrome存在差异，进一步放大了该问题

修复方案 #

1. 替换CSS样式

将背景容器改为固定定位，永远贴合视口显示，滚动时不会跟随页面移动，自然不会出现留白：

/* 先清空默认边距，避免出现滚动条偏移 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
.background {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* 用视口单位保证尺寸永远匹配视口 */
  height: 100vh;
  width: 100vw;
  /* 替换absolute为fixed，固定在视口底层 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

2. 调整页面模板

给商品卡片套一层父容器，确保内容层级高于背景，不会被背景遮挡：

{% block content%}
<div class="background">
  <canvas id="canv" />
</div>
<!-- 新增商品容器 -->
<div class="product-container">
{% for product  in all products %}
<div style="padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px; float: left;">
  <div class="card" style="width: 20rem; height: 20rem; opacity: 0.7;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">{{product.title}}</h5>
      <p class="card-text">{{product.description}}</p>
      <a href="#" class="btn btn-primary">{{product.link}}</a>
    </div>
  </div>
</div>
{% endfor %}
</div>
{% endblock%}

3. 修改Canvas尺寸逻辑

将screen的尺寸改为视口尺寸，同时监听窗口大小变化动态调整Canvas尺寸，避免窗口缩放时出现留白：

const canv = document.getElementById('canv')
// 调整Canvas尺寸的函数
function adjustCanvSize() {
  canv.width = window.innerWidth
  canv.height = window.innerHeight
  // 这里保留你原来的Canvas绘制逻辑，尺寸变更后重新绘制内容
}
// 初始化调用
adjustCanvSize()
// 窗口大小变化时重新调整
window.addEventListener('resize', adjustCanvSize)

验证说明 #

修改后背景会永远固定在视口底层，不管页面滚动多长、商品内容有多少，都不会出现白色空白区域，且兼容Firefox、Chrome等主流浏览器，和你使用的Flask后端框架没有冲突。

内容的提问来源于stack exchange，提问作者max.syntax