如何在CSS中实现粘性背景图自适应填充并防止内容溢出？

我正在尝试让一张粘性背景图自动调整大小以覆盖整个div标签，当前代码如下：

CSS代码

html, body { margin: 0; height: 100%; width: 100%; min-height: 100%; min-width: 100%; }
#header { height: 100px; background: black; width: 100%; }
#rest { height:1000px; width: 100%; position: relative; background-color: blue; }
#background { background-image: url("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); background-repeat: no-repeat; height: 500px; position: sticky; top: 0; }
#content { min-height: 100%; width: 50%; background-color: yellow; z-index: 1; left: 50%; -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); position: absolute; }

HTML代码

<div id="header"></div>
<div id="rest">
  <div id="content">
    <span> mt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vmpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor </span>
  </div>
  <div id="background"></div>
</div>

目前遇到两个核心问题：

1. 文本内容出现溢出，超出了容器范围
2. 粘性背景图未能覆盖整个容器背景
   另外，我不得不将body的height设置为1000px才能看到所需效果，想知道能不能通过设置height:100%来实现同样的效果？

咱们一步一步调整代码，搞定这些问题：

1. 让粘性背景图铺满容器 #

要让背景图完全覆盖#rest容器，给#background添加几个关键样式：

• width: 100%：确保宽度占满父容器
• background-size: cover：让背景图按比例缩放，完全覆盖容器（不会拉伸变形）
• height: 100vh：固定背景图高度为视口高度，配合粘性定位滚动时保持全屏

2. 修复文本溢出问题 #

当前#content用position:absolute会脱离文档流，导致文本溢出后无法撑开父容器。调整方式：

• 把position:absolute改成position:relative，让内容正常占据空间，自动撑开容器
• 保留z-index:1，确保内容显示在背景图上方

3. 用自适应高度替代固定值 #

要实现height:100%的基础效果同时支持内容拉伸：

• 给html, body设置min-height:100vh，确保页面至少占满视口，同时随内容自动增高
• 给#rest用calc(100vh - 100px)设置最小高度，减去#header的高度，保证初始占满剩余视口

修改后的完整代码 #

CSS代码

html, body { 
  margin: 0; 
  min-height: 100vh; /* 确保页面至少占满视口高度 */
  width: 100%; 
}
#header { 
  height: 100px; 
  background: black; 
  width: 100%; 
}
#rest { 
  min-height: calc(100vh - 100px); /* 减去header高度，初始占满剩余视口 */
  width: 100%; 
  position: relative; 
  background-color: blue; 
}
#background { 
  background-image: url("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); 
  background-repeat: no-repeat; 
  background-size: cover; /* 按比例覆盖容器 */
  width: 100%;
  position: sticky; 
  top: 0; 
  height: 100vh; /* 固定为视口高度，保持全屏粘性 */
}
#content { 
  min-height: 100%; 
  width: 50%; 
  background-color: yellow; 
  z-index: 1; 
  margin: 0 auto; /* 稳定的水平居中方式 */
  padding: 20px; /* 避免文本贴边，提升阅读体验 */
  position: relative; /* 相对定位，正常撑开容器 */
}

HTML代码

<div id="header"></div>
<div id="rest">
  <div id="background"></div> <!-- 把背景div放前面，避免层级冲突 -->
  <div id="content">
    <span> mt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vmpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor </span>
  </div>
</div>

关键修改说明 #

• 背景图：background-size: cover保证图片比例不变且完全覆盖容器，height:100vh配合sticky定位，滚动时始终保持全屏显示。
• 内容层：改为相对定位后，文本溢出会自动撑开父容器，解决溢出问题；margin:0 auto比transform居中更稳定，内边距提升了阅读舒适度。
• 高度设置：用min-height:100vh和calc函数实现了自适应高度，既保证初始占满视口，又能随内容自动延伸，不需要固定1000px高度。

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