Question

我正在开发HTML / CSS对话框窗口，它有标题和可滚动的主体。我希望其内容具有相应的大小，但如果对话框高于浏览器窗口，则显示正文中的滚动条。不可思议我不能让身体可滚动，我该如何解决？这是我使用的代码（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

更改溢出值以滚动＆＃34;溢出：滚动＆＃34;

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

1 个答案: