如何在页眉和页脚中间放置内容? [英] How to fit content in middle of header and footer?

问题描述

我制作了一个带有时间轴"的html页面，该页面实际上是一个具有很多单元格的表，下一页以该时间轴为主要内容，上方是一个带有导航栏的标题，而下方是一个页脚与其他数据.

I have made a html page with a "timeline" that actually is a table with lot of cells, the following page have that timeline as main content and above that there is a header with a nav-bar and below there is a footer with other data..

问题是主要内容位于页眉下方但位于页脚下方，因此您可以在此处看到主要内容的滚动条从页眉下方开始，这是正确的，但是有些表行在页脚处出现，因此不是可见，并且滚动条位于页脚下方:

The issue is that the main content goes below the header but under the footer so as you can see here the scrollbar of main content start under the header and that's correct but there are some table rows that goes behing the footer so are not visible and the scrollbar goes under the footer:

所以问题是如何设置内容以适合页眉和页脚的中间?

So the question is how can i set the content to fit in the middle of header and footer?

发body看起来像这样，可能有数百条发

The tbody looks like this and could have hundreds of trows

<tbody id="timeline"><tr id="1" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 1<span class="badge badge-dark ml-1">2</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr><tr id="2" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 2<span class="badge badge-dark ml-1">2</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr><tr id="3" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 3<span class="badge badge-dark ml-1">4</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr><tr id="4" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 4<span class="badge badge-dark ml-1">2</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr><tr id="5" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 5<span class="badge badge-dark ml-1">3</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr></tbody>

由于html文件太大，我将发布 HERE 包含所有css和html部分的JSFiddle

as the html file is too large i'll post HERE the JSFiddle with all css and html part.

推荐答案

减小下面显示的tableFixedHead的最大高度

Decrease the max height of tableFixedHead Shown below

.tableFixHead {
    max-height: calc(100vh - 114px);
    overflow-y: scroll;
}

更新
Internet explorer (IE) 在此处了解更多信息

这篇关于如何在页眉和页脚中间放置内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！