求助：网页添加容器后底部出现大量空白空间如何解决

• 排查容器的内外边距：打开浏览器开发者工具（按F12），选中你的容器元素，查看右侧样式面板的盒模型，检查是否存在过大的margin-bottom或padding-bottom，这些是导致底部空白的常见原因。

• 重置页面基础样式：浏览器默认会给html和body添加margin，先把这些默认样式清掉，同时让页面至少占满视口高度：

  html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }
  

• 调整容器高度设置：如果你的容器用了固定height值，而实际内容高度不足，就会留出空白。可以把height换成min-height，让容器自适应内容高度，同时确保父元素能撑满整个视口。

• 修复浮动元素导致的高度塌陷：如果容器内有浮动元素，容器可能会出现高度塌陷，视觉上表现为底部空白。给容器添加清除浮动的样式：

  .你的容器类名::after {
    content: "";
    display: table;
    clear: both;
  }
  

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