具有标题和自动内容的CSS对话框

Question

I'm working on HTML/CSS dialog window which has header and scrollable body. I want to have body sizable to its content, but show scrollbars in body if the dialog higher than browser window. Unfourtantely I can't make body scrollable, how can I fix it? Here is the code that I use (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>

And CSS styles:

.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

更改溢出值以像“ overflow：scroll”一样滚动