解决Footer中含图片的Div宽度超出预期问题

问题根源分析 #

1. footer未设置盒模型属性，padding:4rem会额外增加元素总宽度，导致内容溢出视口
2. #contact-handle使用固定宽度400px，在窄屏或布局空间不足时易超出范围
3. HTML中<div id="App_gateway" class="container">未闭合，DOM结构错乱引发布局异常
4. 各.container未设置合理的空间分配规则，flex布局下区块宽度失衡

具体修复步骤 #

1. 修复DOM结构错误

给未闭合的App_gateway区块添加闭合标签：

<div id="App_gateway" class="container">
  <h4>Install App</h4>
  <br>
  <div class="button box">
    <img src="images/Footer-img/app-store.png">
    <img src="images/Footer-img/google-play.png">
  </div>
</div> <!-- 新增闭合标签 -->

2. 调整盒模型与基础布局

给footer添加盒模型属性，确保padding不会额外扩展元素宽度：

footer {
  background-color: #1a1a1a;
  height: 100%;
  padding: 4rem;
  box-sizing: border-box; /* 新增：padding纳入元素总宽度计算 */
  width: 100%; /* 确保footer占满视口宽度 */
}

3. 优化Flex布局的空间分配

修改#footer和.container的样式，让各区块自适应分配空间：

#footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap; /* 新增：窄屏时自动换行，避免横向挤压 */
  gap: 2rem; /* 用gap替代margin，更精准的间距控制 */
}

#footer .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0; /* 移除原有margin，改用gap控制间距 */
  flex: 1; /* 新增：让每个container均分剩余空间 */
  min-width: 200px; /* 新增：设置最小宽度，避免窄屏内容挤成一团 */
}

#contact-handle {
  max-width: 400px; /* 把固定width改为max-width，允许空间不足时自适应缩小 */
  flex: 1.2; /* 可选：让联系区块占比略大，保证内容可读性 */
}

4. 优化按钮图片显示（可选）

原.button img的百分比宽度在小容器中显示过小，改用固定宽度保证可读性：

#footer .button img {
  width: 120px; /* 替换15%为固定宽度 */
  margin-right: 1rem;
}

修复后效果 #

• 各.container根据可用空间自动分配宽度，不会超出footer范围
• 窄屏时区块自动换行，避免横向溢出
• 联系区块保留最大宽度限制，同时支持自适应缩小
• DOM结构正确，消除布局错乱隐患

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