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

【问题标题】：HTML/CSS Div scrolling into element aboveHTML/CSS Div 滚动到上面的元素
【发布时间】：2018-03-14 19:12:53
【问题描述】：

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

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

有没有办法防止这种情况，使第二个 div 不会向上滚动到其初始顶部位置上方？

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

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

HTML 代码（片段）：

.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>

【问题讨论】：

标签： html css scroll

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：