防止div垂直扩展，给它滚动条答案

【问题标题】：Prevent div from expanding vertically, give it scrollbar防止div垂直扩展，给它滚动条
【发布时间】：2016-01-31 22:51:07
【问题描述】：

参考以下小提琴：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>

【问题讨论】：

为什么没有js？如果你只使用 js，大概需要 5 分钟。
@TingSun 一个人应该不使用js进行布局，这就是CSS的用途
@Turnip 我尝试了很多东西。我认为写一个简单的问题没有任何问题。当我需要阅读文本段落来理解某人的问题时，我个人会感到沮丧。这不是让事情变得更容易吗？

标签： html css

【解决方案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/

【讨论】：

【解决方案2】：

Fiddle

在我的小提琴中，您会看到一切都是流畅且响应迅速的。

要使用的主要代码是这样的：

.footer {
position: fixed;
bottom: 0;
}

你会在小提琴中看到它应该按照你的意愿工作:)。

【讨论】：

【解决方案3】：

另一种解决方案（非 flexbox）：

CSS（基于您问题中的类）

    * { 
        margin:0; padding:0; 
    }

    .modal, .dialog, .content {
        height: 100vh;
    }

    .header {
        position: relative;         
        height: 15%;
        background-color: purple;           
    }

    .body {
        position: relative;
        height: calc( 100vh - 30%);
        overflow: auto;         
        background-color: #b3ff66;  
    }

    .footer {
        position: relative;         
        height: 15%;
        background-color: red;          
    }

JSfiddle：https://jsfiddle.net/537w3qsn/3/

【讨论】：