UPDATE : Added link to the example: http://jsfiddle.net/bfNzH/1/
This is how my HTML structure looks:
<body>
<div class="wrapper">
<div class="left">left bar</div>
<div class="right">
<div class="topbar">topbar</div>
<div class="header">header</div>
<div class="content">
<div>..some stuff</div>
<table>
<thead>
<tr>
<th class="th1">Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
CSS
body {
height : 100%;
}
.wrapper {
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
overflow : hidden;
}
.left {
height : 100%;
position : absolute;
width : 50px;
overflow : hidden;
border-right : 1px solid black;
}
.right {
position : absolute;
top : 0;
left : 50px;
bottom : 0;
right : 0;
//border : 1px solid red;
}
.topbar {
height : 20px;
display : table;
width : 100%;
border-bottom : 1px solid green;
}
.header {
height : 30px;
display : table;
width : 100%;
}
.content {
width : 100%;
height : 100%;
position : absolute;
overflow : auto;
top : 50px;
bottom : 0px;
border-top : 1px solid yellow;
border-bottom : 1px solid yellow;
}
.th1 {
width : 50%;
}
table {
width : 100%;
}
th, tr {
text-align : center;
}
In case my table has numerous rows, the content extends beyond the page and a scrollbar appears. However, the scrollbar placement isn't ideal:
I realize that due to the absolute positioning of elements and adding a top, the vertical scrollbar is offset by that much.
I am looking for one of these solutions:
- Adjust the scrollbar position on the content element
- Move the scrollbar to the table body
The second solution can be achieved by applying display : block to tbody, but it disrupts the alignment significantly. Please see the issue below: