html - 防止div垂直展开，给它滚动条

Question

引用以下 fiddle :https://jsfiddle.net/537w3qsn/

这是我想要的:

• 页眉和页脚应始终在页面上保持可见。
• 主体(中间的绿色 div)应该有一个垂直滚动条，否则会导致内容溢出。它不应增长太多并将页脚推离页面。
• 布局应该流畅。模态应占据整个屏幕。
• 请仅在万不得已时才使用 javascript。
• 否则，您可以随意修改 HTML 和 CSS，但您希望达到相同的效果。

示例 CSS:

.modal {
    padding: 0px;
    background-color: #ff6666;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.body {
    overflow: auto;
    background-color: #b3ff66;
}

.dialog {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #66ffff;
}

.content {
    height: 100%;
    border-radius: 0px;
    background-color: #b266ff;
}

示例 HTML:

<div class="modal">
    <div class="dialog">
        <div class="content">
            <div class="header">
                <h4>Header</h4>
            </div>
            <div class="body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Test</th>
                            <th>Test</th>
                            <th>Test</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- LOTS OF CONTENT HERE -->
                    </tbody>
                </table>
            </div>
            <div class="footer">
                This is the footer.
            </div>
        </div>
    </div>
</div>

Answer 1

您可以使用 flexbox 来分配高度。

/* Create a vertical flexible container */
.modal {
  display: flex;
  flex-direction: column;
}

/* Every child will fit their content, but .body will take the remaining space */
.body {
  flex: 1;
}

您可以在此处查看示例:https://jsfiddle.net/tzi/ud4zsn2e/