求助实现全屏固定高度div内滚动子元素的自适应布局

可以通过 Flexbox 实现你需要的布局效果，核心是利用 flex 布局的空间分配特性，结合 overflow 属性实现局部滚动。以下是具体实现代码和说明：

HTML 结构 #

<div class="main">
  <div class="main__inner">
    <div class="main__inner__content">
      <div class="main__inner__content__first">
        <div class="main__inner__content__description-1">
          <!-- 大量内容 -->
          这里放可滚动的内容...<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          底部内容
        </div>
      </div>
      <div class="main__inner__content__second">
        <div class="main__inner__content__description-2">
          <!-- 大量内容 -->
          这里放可滚动的内容...<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          重复内容测试滚动<br>
          底部内容
        </div>
      </div>
    </div>
  </div>
  <!-- 可选的footer，删除后布局自动适配 -->
  <div class="main__footer">
    我是底部固定区域
  </div>
</div>

CSS 样式 #

/* 全屏固定容器 */
.main {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  /* 防止内部元素溢出时出现页面滚动 */
  overflow: hidden;
}

/* 中间内容区域：自动填充footer以外的剩余高度 */
.main__inner {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main__inner__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 自动占据剩余高度的区域 */
.main__inner__content__first {
  flex-grow: 1;
  overflow: hidden; /* 隐藏超出部分，让内部子元素滚动 */
}

/* 可滚动的子元素 */
.main__inner__content__description-1 {
  height: 100%;
  overflow-y: auto; /* 垂直方向滚动 */
  /* 可选：美化滚动条 */
  scrollbar-width: thin;
}

/* 固定高度的区域 */
.main__inner__content__second {
  height: 200px; /* 根据需求设置固定高度 */
  overflow: hidden;
}

.main__inner__content__description-2 {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* 底部固定区域（可选） */
.main__footer {
  padding: 1rem;
  background: #eee;
}

关键实现点说明 #

• .main 使用 flex-direction: column，让内部的 .main__inner 和 .main__footer 垂直排列，flex-grow: 1 让 .main__inner 自动填充剩余高度，即使删除 .main__footer 也能自动扩展到全屏。
• 给需要滚动的父容器（.main__inner__content__first、.main__inner__content__second）设置 overflow: hidden，再给子元素设置 height: 100% 和 overflow-y: auto，这样内容超出时只会在局部滚动，不会触发页面整体滚动。
• .main 加上 overflow: hidden，彻底避免页面出现滚动条。

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