Question

我有一个对话框，其中位置：绝对和最大高度设置。 max-height 属性设置来自 javscript 框架（jQuery UI对话框）之外，所以我不喜欢对它没有任何控制权。我有2个div：一个充满动态内容和静态页脚。我希望对话框随着内容增长，直到达到max-height ，然后我的内容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

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

1 个答案: