I have set up a webpage containing a table and a footer. Utilizing bootstrap, I ensured that the footer remains visible while the table adjusts its height based on the remaining space on the screen.
While this resizing works perfectly when the window size is larger than the table, an issue arises when the window size shrinks too small. In such cases, I aim to implement a scrollbar for the table without affecting the visibility of the footer.
To better illustrate the problem, you can watch a video showcasing it here: https://www.youtube.com/watch?v=p3TPqvivW_8
Below is the snippet of code I am working with:
<div>
<div className="container-fluid aaa">
<div className="row justify-content-center min-vh-100">
<div>
<div className="d-flex flex-column h-100">
<div className="row justify-content-center bg-blue flex-grow-1 flex-nowrap">
<table className="table table-bordered table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">IP</th>
</tr>
</thead>
<tbody>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
<Device type="SRG-X120" ip="192.168.48.1"/>
</tbody>
</table>
</div>
<div className="row justify-content-center bg-purple">
<div className="text-white">
<Footer />
</div>
</div>
</div>
</div>
</div>
</div>
</div>