Flask项目HTML页面背景图无法铺满屏幕且偏移问题求助

开发者阿泽

2026-10-5

问题原因

浏览器默认样式未重置：body默认自带8px外边距，直接导致背景整体向右下偏移；ul标签（对应你的.responsive-table容器）默认自带40px左侧内边距，是表格行左侧边距比原示例大的核心原因。
背景无法铺满底部：百分比高度规则依赖父元素的高度声明，你仅给body设置了min-height:100%，但根元素html没有做高度声明，导致body的高度只能匹配实际内容高度，内容不足时底部就会出现空白区域。
媒体查询规则错误：你写的@media all and (max-width: 100%)是无效规则，原示例的响应式触发阈值为767px，错误的规则会导致响应式逻辑失效，也可能引发布局错位。

修复方案

按以下步骤修改你的CSS代码即可解决所有问题：

先在CSS文件最开头添加全局样式重置，同时给html根元素设置高度：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}

修改body的样式，可选添加背景居中配置：

body {
  font-family: "lato", sans-serif;
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 100%;
}