1

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:

enter image description here

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

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>

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

NiceToMytyuk
  • 3,644
  • 3
  • 39
  • 100

1 Answers1

2

Decrease the max height of tableFixedHead Shown below

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

Update
calc is partially supported in Internet explorer (IE) Read more here

Sameer
  • 4,758
  • 3
  • 20
  • 41