移动端Div底部多余空白：如何让父容器高度适配子元素？

核心问题分析 #

你当前用的min-height: 100%没生效，是因为这个属性必须依赖父元素的明确高度值——如果body、html这类上层容器没设置高度，100%就失去了参照基准，侧边栏自然没法铺满视口高度。另外，元素默认的内外边距也可能导致底部出现空白。

具体解决方案 #

1. 统一全局盒模型，避免padding额外增加容器总高度导致溢出：

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

2. 给根元素设置高度基准，让百分比高度有参照依据：

html, body {
  height: 100%;
}

3. 在移动端媒体查询中调整侧边栏样式，替换min-height为更可靠的设置：

@media (max-width: 768px) {
  .main-sidebar {
    min-height: 100vh; /* 直接基于视口高度，无需依赖父元素高度 */
    /* 也可以用 height: 100%; 前提是html/body已经设置了height:100% */
  }
}

额外注意点 #

• 如果侧边栏的直接父容器不是body，需要同时给这个父容器设置height: 100%，确保高度能传递到.main-sidebar。
• 若用100vh遇到移动端浏览器地址栏遮挡问题，可以补充min-height: -webkit-fill-available;做兼容。

内容的提问来源于stack exchange，提问作者Robert Juszczyński