如何让滚动Div的底部始终不超出当前视口范围？

要实现右侧滚动div始终适配视口，无需滚动页面即可访问其全部内容，核心思路是利用Flex布局让滚动div自动占据右侧容器的剩余垂直空间，同时结合视口高度确保整体不超出屏幕。具体修改如下：

1. 调整HTML结构 #

给右侧的头部区域（标题、文本、按钮）和滚动div的外层容器添加类名right-wrapper：

<div class="right-wrapper">
  <h2>Right Column</h2>
  <p>Here are some elements</p>
  <button>Some button</button>
  <div class="right">
    <!-- 原有滚动内容 -->
  </div>
</div>

2. 修改CSS样式 #

基础布局适配 #

替换根容器和背景容器的高度设置，确保页面支持视口高度：

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

.background {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding: 5px;
}

.container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

右侧容器核心设置 #

让right-wrapper成为垂直Flex容器，滚动div自动填充剩余空间：

.right-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 35px);
  margin-top: 30px;
}

.right {
  flex: 1;
  overflow-y: auto;
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
}

左侧列样式保留 #

.left {
  flex: 0 0 40%;
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
}

小屏幕隐藏逻辑 #

添加媒体查询，在屏幕宽度≤991px时隐藏右侧栏：

@media (max-width: 991px) {
  .right-wrapper {
    display: none;
  }
}

效果说明 #

• 无论屏幕尺寸如何，右侧滚动div的底部始终不会超出当前视口，用户仅需滚动div内部即可查看全部内容，无需滚动整个页面。
• 右侧头部区域高度变化时，滚动div会自动调整自身高度，确保整体适配视口。

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