Question

我正在尝试将内容面板放在固定位置叠加层中以垂直滚动，但它不会滚动，它会被强制进入其容器。

你能发现错误吗？ fiddle

只有绿色底部应该滚动标题应该保持原样。

<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }
    </style>
</head>
<body style="background-color: #502074;">
    <div style="position: fixed; width:100%; height: 100%;">
        <div style="height: 80px; width: 100%; background-color: yellow;">Top</div>
        <div style="height: 10000px; width: 100%; background-color: green; overflow: scroll;">Bottom</div>
    </div>

</body>
</html>

Answer 1

您可以通过将容器的高度移动到::after伪元素来避免向Bottom元素添加容器：

.bottom {
  overflow-y: scroll;
  height: calc(100% - 80px);
}

.bottom::after {
  content: '';
  display: block;
  height: 10000px;
}

<强> Updated Fiddle

Answer 2

感谢@driconmax，这几乎是我的需要，现在就解决了：

<body style="background-color: #502074;">
    <div style="position: fixed; width:100%; height: 100%; ">
        <div style="height: 80px; width: 100%; background-color: yellow;">Top</div>
        <div style="height:calc(100% - 80px);overflow: scroll;">
          <div style="height: 10000px;  width: 100%; background-color: green; ">Bottom</div>
        </div>
    </div>

</body>

Updated fiddle

Answer 3

您只需要像这样添加容器的最大高度

max-height:100%;

并添加滚动属性

overflow-y:auto;

您的代码将如下所示

<style>
    * {
        box-sizing: border-box;
    }
</style>

<body style="background-color: #502074;">
    <div style="position: fixed; width:100%; height: 100%; max-height:100%; overflow-y:auto;">
        <div style="height: 80px; width: 100%; background-color: yellow;">Top</div>
        <div style="height: 10000px; width: 100%; background-color: green; overflow: scroll;">Bottom</div>
    </div>

</body>
</html>

CSS覆盖滚动内容

3 个答案: