容器内多div固定布局问题：滚动内容不重叠解决方案咨询

要实现你需要的布局，核心是通过position: fixed固定顶部元素，并给滚动区域设置正确的外边距和高度约束，避免重叠。以下是调整后的代码：

完整代码 #

CSS #

/* 重置默认样式，消除边距和滚动条问题 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 固定顶部工具栏 */
.toolbar{
  border: 1px solid;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  /* 给固定高度，方便计算下方元素的top值 */
  height: 60px;
  box-sizing: border-box;
}

/* 固定toolbar下方的one容器 */
.one{
  border: 1px solid;
  position: fixed;
  top: 60px; /* 等于toolbar的高度 */
  left: 0;
  width: 100%;
  z-index: 999;
  height: 120px; /* 固定高度 */
  box-sizing: border-box;
}

/* 固定two内的header */
.fixed-header{
  border-top: 1px solid;
  border-bottom: 1px solid;
  position: fixed;
  top: 180px; /* toolbar(60) + one(120) 的总高度 */
  left: 0;
  width: 100%;
  z-index: 998;
  height: 50px; /* 固定高度 */
  box-sizing: border-box;
}

/* 可滚动内容区域 */
.fixed-header-contents{
  /* 上边距等于上方三个固定元素的总高度 */
  margin-top: 230px; /* 60+120+50 */
  /* 设置最大高度为屏幕剩余高度 */
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  padding: 0 10px;
  box-sizing: border-box;
}

HTML #

<body>
<div class="toolbar">
  <h4>toolbar</h4>
</div>
<div class="one">
    <h3>some images</h3>
    <h3>some buttons</h3>
    <h3>some contents</h3>
</div>
<div class="two">
    <div class="fixed-header">
        <h4>fixed header items</h4>
    </div>
    <div class="fixed-header-contents">
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    </div>
</div>
</body>

关键说明 #

• 固定元素布局：所有需要固定的元素（toolbar、one、fixed-header）都使用position: fixed，通过设置top值依次排列，确保它们不重叠。同时设置width:100%和box-sizing:border-box避免宽度溢出。
• 滚动区域约束：fixed-header-contents通过margin-top避开上方固定元素，用calc(100vh - 230px)计算剩余可滚动高度，overflow-y:auto开启垂直滚动，确保内容不会超出屏幕或遮挡上方元素。
• 重置默认样式：消除html和body的默认边距，设置overflow:hidden避免全局滚动条干扰。

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