底部抽屉固定头部与可滚动内容问题：调整滚动顶部边界

问题描述 #

实现了带固定圆角头部的简易底部抽屉，内容支持滚动，但滚动时内容会滑到固定头部后方，且头部左上角、右上角能看到内容及其背景。需要设置内容滚动的顶部边界为头部底部而非抽屉顶部。

解决方案 #

核心是调整头部定位方式，让它留在抽屉文档流内，同时限制内容的滚动起始位置：

1. 替换头部的fixed定位为sticky：fixed会让头部脱离抽屉的文档流，导致抽屉滚动范围包含头部区域。用position: sticky; top: 0让头部固定在抽屉顶部，同时保留在文档流中。
2. 给抽屉添加顶部内边距：设置padding-top: fit-content，让内边距自动适配头部高度，确保内容从头部下方开始布局。
3. 提升头部层级并统一背景：给头部加z-index: 1确保它在内容上方；抽屉设置和头部一致的背景色，避免圆角处透出内容背景。

修改后的完整代码：

CSS

#bottomdrawer {
  width: 200px;
  max-height: 200px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding-top: fit-content;
  background-color: rgb(107 114 128);
  border-top-left-radius: 1.0rem;
  border-top-right-radius: 1.0rem;
}

#header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: rgb(107 114 128);
  z-index: 1;
  padding: 0.5rem; /* 可选，优化头部排版 */
}

#content {
  background-color: rgb(200 200 200);
  padding: 0.5rem; /* 可选，优化内容排版 */
}

HTML

<div id="bottomdrawer">
  <div id="header">
    TITLE
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie rhoncus erat, et venenatis leo accumsan sed. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere. Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.  Vivamus maximus molestie aliquet. Ut feugiat in ex ac posuere.
  </div>
</div>

效果说明 #

• 滚动内容时，头部会固定在抽屉顶部，内容从头部下方开始滚动，不会穿透到头部后方。
• 抽屉的圆角区域不再透出内容背景，视觉效果统一。

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