解决.resto2容器添加图片后不动态扩容覆盖footer问题

问题根源 #

你的.resto2容器设置了position: absolute，这会让它脱离正常文档流，容器无法根据内部图片的数量自动计算高度，导致它会覆盖下方的footer组件。而需求中.resto要保持固定尺寸，.resto2自适应高度，核心就是让.resto2回到文档流中。

具体修改步骤 #

1. 修正.resto2的定位方式
   删掉.resto2的position: absolute、top、left这些属性，让它回到正常文档流，这样容器会自动根据内部图片高度撑开。修改后的CSS：

   .resto2 {
     width: 80%;
     margin: 0 auto;
     /* 移除绝对定位相关属性 */
   }
   

2. 保留.resto的固定尺寸
   维持.resto的固定宽高设置，确保它的尺寸不受.resto2影响，示例CSS：

   .resto {
     width: 1200px;
     height: 800px; /* 这里设置你需要的固定高度 */
     margin: 0 auto;
     background-color: #f0f0f0;
     /* 其他原有样式保留 */
   }
   

3. 图片与容器的适配优化（可选）
   如果需要图片自适应容器宽度，避免溢出，可以给图片加以下样式：

   .resto2 img {
     max-width: 100%;
     height: auto;
   }
   

   要是图片需要横向排列，用float: left后记得给.resto2添加清除浮动的样式，防止高度塌陷：

   .resto2::after {
     content: "";
     display: table;
     clear: both;
   }
   

效果验证 #

修改完成后，.resto2会随着图片数量的增加自动调整高度，不会再覆盖下方的footer，同时.resto容器保持你设置的固定尺寸，完全符合需求。

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