html - 带有标题和自动内容的 CSS 对话框

Question

我正在处理具有标题和可滚动正文的 HTML/CSS 对话框窗口。 我想让正文与其内容相当，但如果对话框高于浏览器窗口，则在正文中显示滚动条。 Unfourtantely 我无法使 body 滚动，我该如何解决？ 这是我使用的代码(jsFiddle:http://jsfiddle.net/4Xvfm/1/):

<div class="dialog">
    <div class="header">Header</div>
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, error, sunt, quaerat aliquid voluptatem dolorum in amet facere dolores cumque magnam placeat! Numquam, nisi, possimus facere iure eos minus repellat.
    </div>
</div>

和 CSS 样式:

.dialog {
    background-color: red;
    max-width: 100%;
    width: 400px;
    max-height: 100%;

    /* Place dialog at the center of the screen */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.dialog > .header,
.dialog > .footer {
    background-color: blue;
    height: 50px;
}

.dialog > .content {
    /* This doesn't work! */
    overflow: auto;
}

Answer 1

更改溢出值以滚动 “溢出:滚动”