Forum Moderators: not2easy
I have a div with overflow: auto set and max-height: 600px. Inside that I have a table that has hundreds of rows. The scrollbar on the overflowed div works fine, but the browsers scrollbars also show the length of the table inside and I can scroll well past the bottom of my page, even though there is nothing showing.
Anyone got any ideas?
Thanks in advance.
Code:
<div class="styledBox">
<div style="overflow: auto; max-height: 600px">
<table>
<thead><tr>
<th> </th>
<th>Name</th>
</tr></thead>
<tbody>
<tr>
<td>content 1</td>
<td>content 2</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
</tr>
.... MANY ROWS PAST THE END OF THE PAGE
</tbody></table>
</div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body {
overflow: hidden;
}
</style>
</head>
<body>
<div class="styledBox">
<div style="overflow: auto; height: 600px;">
<table>
<thead><tr>
<th> </th>
<th>Name</th>
</tr></thead>
<tbody>
<tr>
<td>content 1</td>
<td>content 2</td>
</tr>
<tr>
<td>content 1</td>
<td>content 2</td>
</tr>
.... MANY ROWS PAST THE END OF THE PAGE
</tbody>
</table>
</div>
</div>
<!--##########
I have a div with overflow: auto set and max-height: 600px. Inside that I have a table that has hundreds of rows. The scrollbar on the overflowed div works fine, but the browsers scrollbars also show the length of the table inside and I can scroll well past the bottom of my page, even though there is nothing showing.
-->
</body>
</html>
Unfortunately the rest of the page needs to scroll as the entire content, including the scrolling div, is about 2 browser pages long.
I actually have two radio buttons on the page and when one is selected it displays the above mentioned overflow div. So when no radio button is selected the browser page scrolls fine its two pages fine. When you select one of the radio buttons and it displays the overflow div, the page scrollbar goes small and you can scroll well beyond the bottom of the page.
I guess I'm more curious if this is a bug in my css or actually how browsers render this styling. If it's the latter then at least I know I don't have to check over my code.
Any help is appreciated.
I will look into this more and post if I accidentally found a solution.
Sorry for the false alarm.
