Why part of an 'absolute' positioned DIV element in a table cell is not shown (in Google Chrome only)
To demonstrate this issue, below HTML file displays a very tall DIV (named div1), which is initial hidden, and a button to show or hide div1. Open it in Google Chrome, then click on the button to show the div. You will notice that the div is now displayed, but there is no way to see its lower part because it is too tall to fit in the window and Chrome does not display a scroll bar.
If you open it in Firefox, there is no such issue. Firefox displays a scroll bar when the div1 is shown so that you can scroll to see its lower part.
<html>
<head>
<script src="http://api.prototypejs.org/javascripts/pdoc/prototype.js" type="text/javascript"></script>
</head>
<body>
<input type="button" onclick="$('div1').t开发者_运维知识库oggle();" value='Toggle'></input>
<table>
<tr>
<td>
<div style="position:relative">
<div style="position:absolute">
<div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
I found this had something to do with the table element and the first div. If I either remove the table/tr/td tags or change the style of the first div from "position: relative" to "position:absolute", Google Chrome will display the scroll bar properly. Unfortunately, in my project, I could not do this as it would affect a lot of elements in the page.
It looks like a bug in Chrome? Are there any other workarounds/fixes?
This also occurs in Safari.
Changing the position of the div wrapping #div1 from absolute to relative will fix this:
<div style="position:relative">
<div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>
</div>
加载中,请稍侯......
精彩评论