具有最大高度和滚动的动态内容的对话框 + 页脚 css答案

【问题标题】：Dialog with max height and dynamic Content that scrolls + footer css具有最大高度和滚动的动态内容的对话框 + 页脚 css
【发布时间】：2016-01-04 18:38:01
【问题描述】：

我有一个 对话框，其中设置了 position: absolute 和 max-height。 max-height 属性是 set 从外部 by 一个 javscript 框架（jQuery UI 对话框），所以我不对它没有任何控制权。在里面我有 2 个 div：一个充满 动态内容 和一个 静态页脚。我希望 对话框 与它的内容一起增长直到达到最大高度，然后我的内容 div 应该显示一个 滚动条。

html 看起来像这样：

<div class="dialog">
    <div class="content">
        This text doesn't mean much it's just supposed to fill content.<br>
        This text doesn't mean much it's just supposed to fill content.
        ...
    </div>
    <div class="copyright">
        © copyright 2015 by some chilled dude
    </div>
</div>

还有这样的css：

.dialog {
    position: absolute;
    left: 100px;
    top: 100px;
    max-height: 300px;
    border: solid black 1px;
}

.content {
    height: auto;
    overflow: auto;
    max-height: calc(100% - 20px);
}

问题是，内容总是会弹出其周围的对话框并压低页脚。

example

如果我设置对话框 div 的高度，一切都很好。

example2

我可以使用 javascript 计算高度并将其设置在我的对话框 (example3) 上，但我想只使用 css 来执行此操作。这可能吗？

【问题讨论】：

这可能是一个愚蠢的问题，但是如果你的对话的最大高度是 300 像素并且你的内容的最大高度是 100% - 20 像素，你不能只设置最大高度吗内容到 280px 以获得您想要的结果？ jsfiddle.net/cm34q5j8/3
同意@Pete 并且显然 calc() 不会在 parent 仅设置为 min* 或 max* 值的情况下进行计算，这与内容的动态高度 + 页脚有什么关系？由于 OP 多次强调 dynamic，所以 flexbox 可以挽救。
啊好的@Pangloss，动态的事情可以通过将计算移动到高度来解决：jsfiddle.net/cm34q5j8/6（如果你改变html框架的高度，你会看到它有效）
我不知道对话框创建时max-height的值，它是由框架通过javascript设置的，所以这里的max-height只是对话框实例的例子。抱歉，我没有在我的帖子中指出这一点。

标签： css height max scrollable dynamic-content

【解决方案1】：

作为替代方法，您可以使用flexbox。

.dialog {
    position: absolute;
    left: 100px;
    top: 100px;
    max-height: 300px;
    border: solid black 1px;
    display: flex;
    flex-flow: column;
}
.content {
    overflow: auto;
}

jsfiddle

【讨论】：

你的例子看起来很有希望。我之前在这里尝试过使用不同的设置（对话框：flex/coumn，内容：增长 1 收缩 0，版权：收缩 0 增长 0 基础〜20px），但我没有成功，所以我做了这个例子。我现在正在尝试您的解决方案，但似乎 jQuery ui 或周围的 css 正在干扰布局。