绝对定位Div底部滚动超出范围，求CSS解决方案

嘿，我来帮你搞定这个底部黄色盒子的滚动问题！完全不用靠图形化实现，纯CSS就能解决，咱们一步步捋清楚：

底部黄色盒子出现滚动异常，本质是没给它的容器设置正确的边界约束——既没限制它的垂直滚动范围到页脚（黑色线条），也没管控横向溢出。咱们要做的就是用CSS给它套个“规矩的框”。

先假设你的页面基础结构大概是这样（简化后的版本）：

<div class="page-wrap">
  <header><!-- 顶部内容 --></header>
  <main><!-- 中间主体内容 --></main>
  <div class="yellow-box-wrapper">
    <div class="bottom-yellow-box"><!-- 需要滚动的内容 --></div>
  </div>
  <footer class="footer-line"><!-- 黑色线条页脚 --></footer>
</div>

对应的CSS代码可以这么写，每一步都有明确作用：

1. 先给页面整体做布局约束，确保页脚牢牢固定在底部：

.page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.footer-line {
  height: 2px; /* 对应你黑色线条的高度 */
  background-color: #000;
  margin-top: auto; /* 这一步是关键，把页脚推到页面最底部 */
}

2. 给底部黄色盒子的父容器设置滚动边界：

.yellow-box-wrapper {
  flex-shrink: 0; /* 防止被页面其他元素挤压变形 */
  overflow: hidden; /* 把超出容器的内容藏起来 */
  width: 100%; /* 确保容器不超出页面宽度 */
  /* 如果头部和中间内容是固定高度，还可以用calc精准计算容器最大高度： */
  /* max-height: calc(100vh - 80px - 200px - 2px); */
  /* 80px是头部高度，200px是中间内容高度，2px是页脚线条高度 */
}

3. 给底部黄色盒子设置滚动规则：

.bottom-yellow-box {
  height: 100%;
  overflow-y: auto; /* 只在内容超出时显示垂直滚动条 */
  overflow-x: hidden; /* 直接禁用横向滚动，解决向右超出的问题 */
  width: 100%;
  box-sizing: border-box; /* 避免内边距、边框额外增加宽度导致溢出 */
}

• 用flex布局是为了更灵活地分配页面空间，margin-top: auto能自动把页脚固定在底部，不管页面内容多少。
• overflow-y: auto和overflow-x: hidden组合，既能实现需要的垂直滚动，又彻底杜绝横向溢出的问题。
• box-sizing: border-box是个容易忽略的小细节，它能让盒子的内边距和边框算在宽度里，不会额外撑大盒子导致横向超出。

这样调整后，底部黄色盒子的滚动就会精准停在黑色页脚线条处，而且绝对不会向右超出页面范围啦！

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