Question

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

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

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

enter image description here

- - Here's a Fiddle to play with. - -

相关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;
}

使用固定页眉/页脚填充100％父高的表

2 个答案: