My webpage layout includes a sidebar and main body sections with specific styling:
#sidebar {
float: left;
position: relative;
width: 200px;
padding: 20px;
}
The main body is designed like this:
#main {
margin: 0 20px 0 260px;
}
On one of my pages, the main section has filters that need to remain fixed while displaying a large table. The table is too big for the page both horizontally and vertically. I want the table to be in a scrolling div that always expands to fit the entire page and adjusts if the page size changes. Here's how it looks currently:
<div id="sidebar">
<div class="boxed" id="menu">
<h2 class="title">Main Links</h2>
<div class="content">
<ul>
<li><a href="/">Main page</a></li>
</ul>
</div>
</div>
</div>
<div>
<div id="main">
<h2>Header</h2>
<div class="filters">
Filters go here
</div>
<div style="overflow: auto;">
<table><!-- very large table --></table>
</div>
</div>
</div>
However, there is an issue when the table becomes too tall for the current page. The bottom scroll bar of the scrolling div disappears off-screen, as the main vertical scrollbar takes over. To resolve this problem, I attempted:
<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:0;">Unfortunately, this caused the div to extend across the entire page, overlapping with the sidebar. What would be the best approach to fixing this display problem?