html - 使用固定页眉/页脚填充 100% 父级高度的表格

Question

这个问题已经被问了一百万次，并且同样给出了同样多的不同解决方案，但我似乎找不到与我的情况相关的问题，因此我再次问这个问题。

我想创建一个表，它填充 100% 的父容器，并带有锁定的页眉和页脚。找到一个干净、简单的解决方案可能会导致骑士身份，所以我知道这不是一项简单的任务，它可能需要 Javascript——这很好。

这是我的布局：两个固定的左侧菜单，一个带有两个页眉的动态宽度内容区域，以及一个使用固定页眉和页脚填充 100% 内容区域的表格。

- - 这是一个可以玩的小提琴。- -

相关HTML：

<div class="page-content" id="grid-container">
    <div class="table-container">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>First</th>
                    <th>Last</th>
                    <th>City</th>
                    <th>State</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Jon</td>
                    <td>Smith</td>
                    <td>Indianapolis</td>
                    <td>Indiana</td>
                </tr>
                [...etc...]
            <tfoot>
                <tr>
                    <td>First</td>
                    <td>Last</td>
                    <td>City</td>
                    <td>State</td>
                </tr>
        </table>
    </div>
</div>

相关CSS：

.page-content {
    height:100%;
    overflow:hidden;
}

.table-container {
    box-sizing:border-box;
    height:auto;
    border:2px solid green;
    overflow:hidden;    
}
#grid-container table thead {
    position:fixed;
    top:0;
}

#grid-container table thead>tr {
    display:block;
}

#grid-container table tbody {
    display:block;
    overflow:auto;
    height:500px;
}

问题：如何将页眉和页脚粘贴到内容区域的顶部和底部（如果垂直调整浏览器大小，让它们移动），并使 tbody 可滚动？

Answer 1

我刚结束使用javascript。这是我所做的：

基本上我计算表格的内容空间（减去标题、子标题和过滤器），然后我将三个表格堆叠在一起：一个用于标题，一个用于正文，一个用于页脚。我将正文高度设置为我计算的内容区域高度，减去页眉和页脚高度。

$(function() {
    drawTable();

    $(window).resize(function(e) {
        drawTable();
    });
});

function drawTable() {

    // Heights for calculating content area
    var windowHeight = $(window).outerHeight();
    var toolbars = $("#toolbars").outerHeight();
    var filters = $("#filters").outerHeight();

    // Total height of the table header and footer
    var headerFooter = $("#grid-container thead").outerHeight() + $("#grid-container tfoot").outerHeight();

    // Size the parent containers based on the remaining area
    $(".page-content").height(windowHeight - toolbars);
    $("#grid-container").height(windowHeight - toolbars - filters - headerFooter);  

    // Set cell widths to be the same for the header, content, and footer
    $("#grid-container tbody td, #grid-container tfoot th, #grid-container thead th").width(100/$("#grid-container thead th").size() + "%");
}

Answer 2

.header
{
 position:fixed;
 z-index: 100;
}

.container {
 min-height: 100%;
 position: relative;
}

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