垂直滚动条存在时sidebar与wrapper的height:100%无法适配真实高度

这个问题我碰到过很多次啦，核心原因是你设置的height:100%是基于父元素的视口高度（也就是浏览器可见区域的高度），而不是页面内容的实际总高度。当内容超过视口出现垂直滚动条时，sidebar和wrapper的高度就会停留在视口高度，无法适配页面的真实高度。

下面给你两种可行的解决方案：

方案一：修改现有绝对定位布局的高度属性 #

只需要把原来的height:100%替换成min-height:100%，就能让容器在至少占满视口高度的基础上，自动跟随内容高度延伸。修改后的关键CSS代码如下：

html, body { 
  margin: 0px; 
  padding: 0px; 
  width: 100%; 
  min-height: 100%; /* 将height改为min-height */
} 

.sidebar { 
  z-index: 5; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 250px; 
  min-height: 100%; /* 同样替换为min-height */
  background: #FFF; 
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); 
} 

.wrapper { 
  background: #EEE; 
  position: absolute; 
  width: calc(100% - 250px); 
  min-height: 100%; /* 替换为min-height */
  top: 0; 
  right: 0; 
  padding: 20px; 
}

原理：min-height:100%会保证容器的最小高度等于视口高度，当内部内容的高度超过视口时，容器会自动拉伸以包裹全部内容，这样滚动条出现时，sidebar和wrapper就能完美适配页面的真实高度了。

方案二：使用Flexbox布局（更现代、更简洁） #

绝对定位布局容易出现层级冲突和自适应问题，推荐用Flexbox重构布局，代码更清晰，自适应逻辑也更自然。HTML结构不需要改动，只需要调整CSS：

html, body { 
  margin: 0px; 
  padding: 0px; 
  width: 100%; 
  min-height: 100%; 
} 

body {
  display: flex; /* 将body设置为Flex容器 */
}

.sidebar { 
  z-index: 5; 
  width: 250px; 
  min-height: 100vh; /* 确保侧边栏至少占满视口高度 */
  background: #FFF; 
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); 
  flex-shrink: 0; /* 防止侧边栏被内容容器压缩 */
} 

@media (max-width: 800px) { 
  .collapse { 
    margin-left: -250px; /* 用margin-left替代left定位实现隐藏 */
  } 
}

.wrapper { 
  background: #EEE; 
  flex: 1; /* 让内容容器自动填充剩余宽度 */
  min-height: 100vh; /* 确保内容容器至少占满视口高度 */
  padding: 20px; 
} 

/* 其余媒体查询和样式保持不变 */

原理：Flexbox布局下，body作为父容器，sidebar固定宽度且不被压缩，wrapper通过flex:1自动占据剩余空间。两者的min-height:100vh保证了最小高度为视口高度，当内容超过视口时，容器会自动延伸，彻底解决滚动条出现时的高度适配问题。

你可以根据自己的项目需求选择其中一种方案，两种都能解决你遇到的问题~

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