IE7 DIV expands to fit TABLE, ignoring HEIGHT% directive
I'd really appreciate a hand getting my fixed-header table scrolling in IE7.
In IE7, my tall data table is forcing its containing DIV to expand vertically, and preventing that DIV's scrollbar from showing. I'm using the excellent cross-browser (including IE7) scrolling, fixed-headers table layout solution from: http://www.sitepoint.com/forums/showthread.php?t=615364&page=3 , but I've modified it so that the table fills the page.
Here's how that looks in-practice:
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
#results { position: absolute; top: 2em; bottom: 0; width: 100%; }
#results div { width: 100%; height: 100%; overflow: auto; overflow-x: hidden; }
#results table { width: 100%; }
#results table th p { position: absolute; top: -2em; }
</style>
<body>
<div id='results'> <!-- provides position referece to headers -->
<div> <!-- scrolls the table it contains -->
<table> <!-- incorrectly expands parent div in IE7 -->
<tr><th><p>FIXED-HEADER HERE</p></th></tr>
<tr><td>TALL CONTENT HERE</td></tr>
</table>
</div>
</div>
</body>
I'm happy with how the headers and scrolling work开发者_Python百科 in FF and IE8. Debug kit in IE7 shows that #results has the desired height, but both DIV and TABLE share the same extremely tall value, where DIV should actually be the height of #results. If I change DIV height from % to px units, it scrolls, but of course no longer resizes properly.
I'm using strict doctype. My table actually contains tabular data, typically 10 columns and 200 rows, so a table is semantically accurate. There's actually more content around this table of course.
I'd prefer not to use javascript for dynamic dimensions, unless it is so simple that it's bulletproof, since I always end up with stupid defects (oh, yeah, I didn't think to re-evaluate size when you hover over hyperlinks and the line height changes, etc.).
Thank you, Shannon
By wrapping DIV (while keeping existing style rules) in a:
<div style="position: absolute; height: 100%; width: 100%;" } ></div>
the issue is resolved. IE7 internals strike again. There is probably a more elegant way to solve it that doesn't require more structural markup, I'd love to hear it if you know of it.
Shannon
加载中,请稍侯......
精彩评论