100vh高度侧边栏在页面内容过长滚动时无法随页面延伸的问题解决方案咨询

这是个很常见的布局坑，你遇到的问题根源在于**100vh是取当前浏览器视口的高度**，而不是页面内容的实际总高度。当页面内容超过视口高度需要滚动时，侧边栏的高度被固定在初始视口高度，自然不会跟着内容一起延伸。

下面给你两个实用的解决办法：

方案一：Flex布局 + min-height #

把侧边栏的height:100vh替换成min-height:100vh，同时给父容器设置Flex布局，让侧边栏和内容区联动：

html { 
  line-height: 1.15; 
  -webkit-text-size-adjust: 100%; 
  font-family: 'Roboto', sans-serif; 
  box-sizing: border-box; 
  min-height: 100%; 
}
*, *:before, *:after { box-sizing: inherit; }
body { margin: 0; min-height: 100vh; } /* 确保body至少占满视口高度 */
.container { min-height: 100vh; display: flex; } /* 用Flex实现并排布局 */
.sidebar { 
  min-height: 100vh; /* 替换height为min-height，保证至少和视口一样高 */
  background-color: #c7cdd1; 
  width: 200px; /* 给侧边栏加个固定宽度，方便查看效果 */
}
.content { 
  flex: 1; /* 让内容区占据剩余所有宽度 */
  padding: 20px; 
}

<div class="container">
  <div class="sidebar"></div>
  <div class="content">
    <!-- 这里放你的长内容，比如大量文本或元素 -->
  </div>
</div>

这个方案的核心是：min-height:100vh让侧边栏至少保持视口高度，而Flex布局会让侧边栏的高度自动跟随容器（也就是页面内容）的高度变化。

方案二：Grid布局（更简洁） #

如果你喜欢更现代的布局方式，Grid会更省心，直接定义列布局即可：

html { 
  line-height: 1.15; 
  -webkit-text-size-adjust: 100%; 
  font-family: 'Roboto', sans-serif; 
  box-sizing: border-box; 
  min-height: 100%; 
}
*, *:before, *:after { box-sizing: inherit; }
body { margin: 0; min-height: 100vh; }
.container { 
  min-height: 100vh; 
  display: grid; 
  grid-template-columns: 200px 1fr; /* 第一列侧边栏固定宽度，第二列内容占剩余 */
}
.sidebar { background-color: #c7cdd1; }
.content { padding: 20px; }

Grid布局会自动让侧边栏的高度和容器保持一致，当内容区变长时，容器高度增加，侧边栏自然就跟着延伸了。

为什么原来的代码不生效？ #

你原来的.container设置了height:100%，但它的父元素body默认没有设置高度，所以100%无法继承到有效高度；就算body有高度，.sidebar的100vh也只是固定视口高度，和内容的实际高度没有关联。

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