当动态显示包含多张图片的容器时，因父容器高度未随内容自适应，导致图片溢出并覆盖页脚。本文通过移除固定高度、合理使用 fit-content、重置默认边距及优化浮动/定位策略，实现内容区域自动撑高且不干扰页脚布局。

当动态显示包含多张图片的容器时，因父容器高度未随内容自适应，导致图片溢出并覆盖页脚。本文通过移除固定高度、合理使用 `fit-content`、重置默认边距及优化浮动/定位策略，实现内容区域自动撑高且不干扰页脚布局。

在实际开发中，类似 .resto2 这类用于切换展示的模块，常因父容器（如 .totall）设置了固定高度（例如 height: 700px），而失去内容自适应能力。一旦内部插入多张定高图片（如 225×280px）并采用浮动或 Flex 布局，容器无法自动扩展，导致后续 <footer></footer> 被视觉遮盖——这并非 footer 本身错位，而是其前序元素未正确“让出空间”。

✅ 核心修复策略

1. 移除硬编码高度，启用内容驱动的高度计算
   将 .totall { height: 700px; } 替换为：

   .totall {
     position: relative;
     width: 100%;
     /* 删除 height: 700px */
   }

   并配合 JavaScript 动态控制：当显示 .resto2 时，给外层 <section></section> 添加 .teste 类，启用 height: fit-content：

   .teste {
     height: fit-content;
   }

2. 重置全局盒模型，消除浏览器默认边距干扰
   在 CSS 开头添加标准化重置（强烈推荐）：

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

3. 修正侧边栏定位，避免脱离文档流引发塌陷
   原 .barraesquerda 使用 float: left 会导致父容器 .totall 无法感知其高度。改为 position: fixed，并确保主内容区留出足够左侧空间：

   .barraesquerda {
     background-color: #dbdee1;
     position: fixed; /* 替代 float */
     left: 0;
     top: 0;
     width: 22%;
     height: 100vh; /* 推荐用 vh 确保视口高度 */
     z-index: 100;
   }
   
   /* 所有主内容区域统一左偏移，避开固定侧栏 */
   .resto, .resto2, footer {
     margin-left: 22%;
   }

4. JavaScript 动态响应切换状态
   在按钮点击事件中，同步更新布局类：

   $('button#showit').on('click', function() {
     $('.resto').show();
     $('.resto2').hide();
     $('.section').removeClass('teste'); // 恢复默认高度行为
   });
   
   $('button#showit2').on('click', function() {
     $('.resto2').show();
     $('.resto').hide();
     $('.section').addClass('teste'); // 启用 fit-content 自适应
   });

⚠️ 注意事项

• fit-content 在旧版 Safari 中需加 -webkit- 前缀（如需兼容 iOS min-height: max-content 或 JS 计算高度）；
• 固定定位的 .barraesquerda 会脱离文档流，因此必须为 .resto/.resto2 显式设置 margin-left，否则文字将从页面最左侧开始渲染，与菜单重叠；
• 图片容器 .imgList 建议添加 flex-wrap: wrap 和 display: flex，确保多图在小屏幕下自动换行，避免横向溢出；
• 若后续需支持响应式侧栏（如移动端收起），应改用 CSS Grid 或 position: sticky + max-width 组合，而非 fixed。

通过以上调整，.resto2 区域将严格依据内部图片数量与尺寸自动扩展高度，footer 始终保持在内容末尾自然渲染，彻底解决覆盖问题。