Question

这就是我想要的：

页眉和页脚应始终在页面上保持可见。
主体（中间的绿色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/

Answer 2

Fiddle

在我的小提琴里，你会发现一切都是流动的和敏感的。

使用的主要代码是：

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

你会在小提琴中看到它应该按照你想要的方式工作：）。

Answer 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/

阻止div垂直扩展，给它滚动条

3 个答案: