Scroller scrollY but full available screen height
Scroller scrollY but full available screen height
![Tabs](https://secure.gravatar.com/avatar/d6d9cead5427d82d1486751ba2ba6c31/?default=https%3A%2F%2Fvanillicon.com%2Fd6d9cead5427d82d1486751ba2ba6c31_200.png&rating=g&size=120)
I am using scroller for the performance improvements over displaying 5,000 rows, especially when using multiple search fields across all those columns.
My issue is that i want the scroll to appear as if it is full page! Image link: https://ibb.co/tm05Jkq
if i, for instance, set "scrollY: 1000" the table is larger than the available space and as such the page scrolls as well as the table.
however, if i set "scrollY: 500" there is a gap between the bottom of the table and the footer.
All of this obviously depends on window/screen size.
How can i tell datatables to just fill all the space?
(FYI im using bootstrap)
Note: I have the footer stuck to the bottom using
<body class="d-flex flex-column h-100">
<div class="d-flex flex-column h-100">
@RenderBody()
</div>
</body>
<footer class="border-top footer mt-auto py-3 bg-light">
<div class="container text-muted">
© 2024 <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
~~~~
Im kinda new to frontend dev, how do i get the table to fill the available space not used by the footer or the header/filters (at the beginning of the body section)
thanks for any help in advance.
This question has an accepted answers - jump to answer
Answers
I would try the ScrollResize plugin. See this example from this thread showing how to have the table resize with the page.
Kevin