具有最大高度和动态内容的对话框，可滚动+页脚CSS

问题描述：

我有一个对话框，其中位置:绝对，并且设置了最大高度. max-height 属性是通过 javscript 框架(jQuery UI对话框)从外部设置的，所以我不知道对它没有任何控制权.在内部，我有2个div:一个充满动态内容和一个静态页脚. 我希望对话框随内容的增长而增长直到最大高度，然后我的内容div应该显示滚动条.

I have a dialog with position: absolute and a max-height set. The max-height property is set from outside by a javscript framework (jQuery UI Dialog), so I don't have any control over it. Inside I have 2 divs: one that is filled with dynamic content and a static footer. I want the dialog to grow with it's content until max-height is reached and after that my content div should display a scrollbar.

html看起来像这样:

The html looks like this:

<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);
}

问题在于，内容始终会弹出其周围的对话框并按下页脚.

The problem is, the content will always blowout its surrounding dialog and push down the footer.

示例

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

If I set the the height of the dialog div everything is fine.

example2

我可以使用javascript计算高度并将其设置在对话框中( example3 )，但是我想要仅使用css来做到这一点.有可能吗?

I can calculate the height with javascript and set it on my dialog (example3), but I would like to do this using only css. Is that possible ?

答

作为一种替代方法，您可以使用flexbox.

As an alternative approach, you could use flexbox.

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

jsfiddle

具有最大高度和动态内容的对话框，可滚动+页脚CSS

相关推荐