当 .resto2 区域动态插入多张图片时，其父容器未自适应高度，导致内容覆盖页脚；根本原因是固定高度限制与脱离文档流的定位方式共同引发的布局塌陷。
当 `.resto2` 区域动态插入多张图片时，其父容器未自适应高度，导致内容覆盖页脚；根本原因是固定高度限制与脱离文档流的定位方式共同引发的布局塌陷。
在响应式网页开发中，常见一种“左侧固定导航栏 + 右侧内容区”的布局结构。本例中，.barraesquerda（左栏）使用 float: left 且设置了 height: 100%，而外层容器 .totall 被硬编码为 height: 700px —— 这正是问题根源：固定高度会强制截断内容流，使后续元素（如 .resto2 中的图片网格）无法推动父容器自然撑高，最终导致 footer 被视觉遮盖。
要实现「仅 .resto2 随图片数量动态伸缩，而 .resto 高度保持稳定」的目标，需从三方面协同修复：
✅ 1. 移除刚性高度约束，启用流式高度计算
将 .totall 的 height: 700px 替换为 min-height: 100vh（确保初始视口内可见），并关键性地为切换显示的内容区域添加 height: fit-content 动态适配能力：
.totall {
position: relative;
width: 100%;
min-height: 100vh; /* 替代固定 height */
}
/* 仅在 .resto2 显示时激活流式高度 */
.section.teste {
height: fit-content;
}同时，在 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 自适应
});✅ 2. 重置全局盒模型，规避默认边距干扰
浏览器默认为 body、h1~h6、p 等元素设置 margin，易引发不可见的布局偏移。统一重置可提升可控性：
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 关键：border 和 padding 不影响 width/height 计算 */
}✅ 3. 优化左栏定位，避免脱离文档流影响高度继承
原 .barraesquerda 使用 float: left 且无清除浮动机制，易造成父容器 .totall 高度坍缩。更稳健的做法是改用 position: fixed，并配合 margin-left 排版右侧内容：
.barraesquerda {
background-color: #dbdee1;
position: fixed; /* 脱离文档流但不破坏父容器高度计算 */
top: 0;
left: 0;
width: 22%;
height: 100vh; /* 视口全高，不依赖父容器 */
z-index: 100;
}
.resto, .resto2, footer {
margin-left: 22%; /* 为右侧内容预留左栏空间 */
}⚠️ 注意事项：若页面存在滚动长内容，建议为
.barraesquerda添加position: sticky; top: 0;替代fixed，以兼顾滚动跟随与无障碍访问兼容性。
✅ 最终效果验证要点
- ✅
.resto2显示时，页面总高度 = 左栏高度 + 图片网格实际占用高度 + footer 高度，无重叠； - ✅ 切换回
.resto时，布局恢复初始紧凑状态； - ✅ 新增任意数量
.imgList元素，.resto2区域均自动延展，footer 始终位于内容末尾下方。
通过解除高度锁定、规范盒模型、重构定位策略，即可在不修改 HTML 结构的前提下，实现精准的动态高度响应——这是现代 CSS 布局中「内容驱动尺寸」原则的典型实践。
