Question

我在HTML页面上有2个div元素。第一个div应该是顶部标题部分（固定），其下面的一个是可滚动的内容div。

标题部分使用固定位置而不滚动。但是，当我滚动第二个div时，它最终会在它上方的div后面向上移动。

有没有办法防止这种情况，以便第二个div不会在其最初的顶部位置上方向上滚动？

此外，滚动条本身具有整个页面的高度（包括顶部）。有没有办法将滚动条限制为第二个div元素。

我尝试了几种排列，包括此页面上引用的答案：Scrolling only content div, others should be fixed

HTML Code（Snippet）：

.Toolbar {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #40A4C8;
    padding: 0 20px;
    z-index: 90;
}

.Layout {
    top: 42px;
    position: absolute;
    width: 100%;
    overflow: auto;
    background-color: orange;
}

.Items {
}

.Items li {
    width: 80%;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding: 10px;
    margin: 10px auto;
    box-sizing: border-box;
    list-style-type: none;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<div>
    <header class="Toolbar">
    </header>
    <main class="Layout">
        <div class="Items">
            <ul>
                <li><p>Item A</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
                <li><p>Item B</p></li>
            </ul>
        </div>
    </main>
</div>  </body>

</html>

Answer 1

为什么不只是添加滚动到你的身体 - 而不是修复你的标题 - 下面我做了它，使页面始终是视口的大小，然后身体溢出

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.Toolbar {
  min-height: 40px;
  width: 100%;
  background-color: #40A4C8;
  padding: 0 20px;
}

.Layout {
  top: 42px;
  width: 100%;
  overflow: auto;
  background-color: orange;
  flex-grow: 1;
}

.Items {}

.Items li {
  width: 80%;
  border: 1px solid #eee;
  box-shadow: 0 2px 3px #ccc;
  padding: 10px;
  margin: 10px auto;
  box-sizing: border-box;
  list-style-type: none;
}

<div class="container">
  <header class="Toolbar">
  </header>
  <main class="Layout">
    <div class="Items">
      <ul>
        <li>
          <p>Item A</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
        <li>
          <p>Item B</p>
        </li>
      </ul>
    </div>
  </main>
</div>

Answer 2

position css属性通过修复第一个div元素的位置来工作。即使你通过一些解决方法阻止第二个div元素落后于第一个div元素，它仍然看起来有点类似的效果。至少可以将height css属性添加到Items类以限制第二个div元素的大小。

HTML / CSS Div滚动到上面的元素

2 个答案: