html - 具有最大高度的固定元素内的可滚动内容

Question

我正在尝试实现一个具有页眉、正文和页脚的可滚动弹出窗口。

它有一个固定的定位父级，其最大高度取决于屏幕，页眉和页脚分别绝对定位在顶部和底部。

我想要实现的是使主体在达到最大高度时可滚动，仅使用 CSS。到目前为止，这是我尝试过的:

<div class="popup">
  <div class="popup-header">Header</div>
  <div class="popup-body">Body</div>
  <div class="popup-footer">Footer</div>
</div>

风格:

.popup {
    position: fixed;
    top: 10%;
    left: 0;
    margin-left: 10%;
    width: 80%;
    max-height: 80%;
}

.popup-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #eee;
}

.popup-body {
  margin-top: 40px;
  margin-bottom: 40px;
  overflow-y: scroll;
  max-height: 100%;
}

.popup-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
}

您可以在此处查看更多详细信息:https://jsfiddle.net/r7ztu8oL/ (注意:用 Body <br /> 填充正文直到溢出)

Answer 1

为了使 .popup-body 可滚动，您必须将 height 属性设置为固定数字。

[解决方案 1]:**CSS 代码:

.popup-body {
  margin-top: 40px;
  margin-bottom: 40px;
  overflow-y: auto;
  height: 400px; // Fixed height
  max-height: 100%;
}

查看 your jsFiddle 的更新版本.

编辑:

[方案二]:

• 删除所有 position: absolute 属性并将它们设置为 position: relative。当您将元素抛出流程时，您不能指望拥有响应式布局。

• 删除所有 width: 100% 属性并在 .popup-header 中用 display: block 替换它们， .popup-body 和 .popup-footer。它会达到相同的结果，而且在您的情况下效率更高。

查看 this jsFiddle用于视觉表示。

CSS 代码(使用position: relative):

.popup-header {
  position: relative;
}

.popup-footer {
  position: relative;
}

编辑 2:

[解决方案 3]:- 在此解决方案中，您必须将所有内容设置为 position: absolute 并为弹出窗口设置 min-height。我已将其设置为 80%。

CSS 代码(显示min-height 和position: absolute):

.popup {
    min-height: 80%;
}

.popup-header, .popup-body, .popup-footer {
  position: absolute;
}

查看最接近您想要的第三个解决方案here .

编辑 3:

[解决方案 4]:(使用 JavaScript)

• 从弹出窗口中删除 min-height。

** CSS 代码**(略微更改边距并移除弹出窗口的最小高度):

.popup {
  background-color: #fff;
  border: 1px solid #ccc;
    position: fixed;
    top: 10%;
    left: 0;
    margin-left: 10%;
    width: 80%;
    max-height: 80%;
}

.popup-body {
  margin: 50px auto;
}

JavaScript 代码:

<script>
    // Declare variables
    var body = document.getElementsByClassName("popup-body")[0];
    var maxHeight = body.parentElement.style.maxHeight;
    var bodyHeight = 0;
    const bodyMargin = 100;

    // Get the height of the first 5 children
    for (var i = 0; i < body.children.length; i++) {
        bodyHeight += body.children[i].offsetHeight;
    }
    // Set the height to the popup (parent)
    bodyheight = (bodyHeight <= maxHeight) ? bodyHeight : maxHeight;
    body.parentElement.style.height = bodyMargin + bodyHeight + "px";
</script>

由于以前的解决方案都不合适，JavaScript 似乎是不可避免的。该脚本非常简单，易于实现。

您可以查看更新后的 jsFiddle here .