Question

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

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

我想要达到的目标是让身体在max-height到达时可滚动，仅使用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的更新版本。

编辑：

[解决方案2] ：

删除所有position: absolute属性并将其设置为position: relative。当您将元素从流中抛出时，您不能指望具有响应式布局。
删除所有width: 100%属性，并将其替换为display: block，.popup-header和.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。

Answer 2

我可能有点迟到了，但这里有一个我认为你正在寻找的例子。仅限HTML和CSS。当内容大于可用空间并且弹出窗口响应时，正文可滚动。设置高度为100％ - （页眉+页脚）是允许正文尺寸正确的，以便可以滚动任何溢出。显然溢出y：auto很重要。 css如下：

.popup {
    position:absolute;
    top:10px;
    left:10px;
    border:1px solid #666;
    width:400px;
    max-width:calc(100vw - 20px);
    height:100%;
    max-height:calc(100vh - 20px);
    margin:auto;
    background:white;
}
header, footer {
    background:#666;
    padding:20px;
    color:#fff;
    font-size:24px;
    text-align:center;
    height:20px;
}
.body {
    padding:10px;
    line-height:1.4;
    height:calc(100% - 140px);
    overflow-y:auto;
}

https://codepen.io/chadrikz/pen/VzmdWB?editors=1100

Answer 3

.popup {
  background-color: #fff;
  border: 1px solid #ccc;
  position: fixed;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  margin: 0 auto;
  max-height: 100%;
}
.popup-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #eee;
}
.popup-body {
  margin-top: 40px;
  margin-bottom: 40px;
  overflow-y: auto;
}
.popup-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #eee;
}

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

3 个答案:

编辑：

编辑2：

编辑3：