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

Question

我有一个对话框，其中设置了position: absolute 和ma​​x-height。 ma​​x-height 属性是通过 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 来完成此操作。这可能吗？

Answer 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