如何用CSS实现FAQ背景响应式？求问题排查与优化方案

问题现状 #

开发网页FAQ模块时，无法实现背景与容器的响应式适配，不同屏幕尺寸下表现不佳：

• 小屏幕上内容要么溢出被截断，要么布局过于拥挤
• 已尝试设置max-width、min-height、百分比单位及媒体查询，但效果不理想

现有代码 #

CSS #

html {
  height: 100vh;
  width: 100vw;
}

body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-image: url('https://wallpapers.com/images/featured/1920-x-1080-night-city-y13hx1qucv0ztepv.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

h2 {
  text-align: center;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container {
  min-height: 40%;
  max-width: 60%;
  border: 1px solid black;
  border-radius: 3%;
  background-color: white;
  padding: 0 10px 10px 10px;
}

.question {
  font-size: 1.1rem;
  padding: 0 0 15px 0;
  border-bottom: 2px solid black;
  cursor: pointer;
}

.question::after {
  content: "+";
  font-size: 1.4rem;
  position: absolute;
  right: 10px;
}

.answer {
  overflow: hidden;
  height: 0;
  transition: all 0.5s ease-in;
}

.question-container.active .answer {
  height: 40px;
}

.question-container.active .question {
  font-size: 1rem;
  transition: all 0.5s ease-in;
}

.question-container .active .question::after {
  content: "-";
  transition: all 0.5s ease-in;
}

HTML #

<div class="container">
  <h2>Frequently Asked Questions</h2>
  <div class="question-container">
    <p class="question">What is the return policy?</p>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam porro quidem eum praesentium officia voluptas repellendus amet minima alias voluptates beatae ea non, natus numquam sint, nam quasi aspernatur aliquam.</p>
  </div>
  <div class="question-container">
    <p class="question">When will I receive my order?</p>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam porro quidem eum praesentium officia voluptas repellendus amet minima alias voluptates beatae ea non, natus numquam sint, nam quasi aspernatur aliquam.</p>
  </div>
  <div class="question-container">
    <p class="question">Where are you located?</p>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam porro quidem eum praesentium officia voluptas repellendus amet minima alias voluptates beatae ea non, natus numquam sint, nam quasi aspernatur aliquam.</p>
  </div>
</div>

问题根源分析 #

1. 内容溢出限制错误：body设置overflow: hidden，导致小屏幕下FAQ容器内容超出视口时直接被截断，无法滚动查看
2. 绝对定位元素脱离容器：.question::after使用position: absolute，但父元素.question-container未设置position: relative，导致加减号相对于body定位，小屏幕会跑到容器外部
3. 容器尺寸适配逻辑缺陷：.container的max-width: 60%在小屏幕下过宽，无最小宽度限制；min-height: 40%无法适配内容高度变化，容易出现溢出
4. 固定高度的回答框：.answer展开时固定height: 40px，内容较多时会被截断，无法自适应高度
5. 缺失移动端基础适配：未添加viewport meta标签，移动端浏览器无法正确识别屏幕尺寸，导致适配失效

改进方案 #

1. 完善移动端基础适配 #

在HTML头部添加viewport标签，确保移动端正确渲染：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 调整body与容器布局逻辑 #

移除body的overflow: hidden，改为给容器添加滚动机制，避免内容截断：

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  background-image: url('https://wallpapers.com/images/featured/1920-x-1080-night-city-y13hx1qucv0ztepv.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.container {
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid black;
  border-radius: 12px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
}

3. 修复绝对定位元素的容器归属 #

给.question-container添加相对定位，让加减号相对于容器定位：

.question-container {
  position: relative;
  margin-bottom: 15px;
}

.question {
  font-size: 1.1rem;
  padding: 0 0 15px 0;
  border-bottom: 2px solid black;
  cursor: pointer;
  padding-right: 30px;
}

.question::after {
  content: "+";
  font-size: 1.4rem;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.3s ease;
}

.question-container.active .question::after {
  content: "-";
  transform: rotate(180deg);
}

4. 优化回答框的自适应高度 #

移除固定高度，改用max-height配合过渡，实现内容自适应：

.answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
  line-height: 1.5;
  padding-top: 10px;
}

.question-container.active .answer {
  max-height: 200px;
}

5. 添加媒体查询优化小屏幕体验 #

针对小屏幕调整字体大小和间距，提升可读性：

@media (max-width: 480px) {
  h2 {
    font-size: 1.3rem;
  }
  .question {
    font-size: 1rem;
  }
  .container {
    padding: 15px;
  }
}

最终效果 #

• 大屏下容器保持合适宽度，内容布局舒展
• 小屏幕下容器占满可用宽度，内容可滚动，无溢出
• 问答交互的加减号始终在容器内，过渡效果流畅
• 背景图始终保持全屏覆盖，适配各类屏幕比例

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