933264-1-ref.html (1802B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>The Grid in an overflowing div</title> 5 <style type="text/css"> 6 html { 7 padding: 0; 8 border: 0; 9 margin: 0; 10 } 11 body { 12 padding: 0; 13 border: 0; 14 margin: 0; 15 } 16 table { 17 padding: 0; 18 margin: 0; 19 border-top: none; 20 border-left: none; 21 border-right: 1px solid black; 22 border-bottom: 1px solid black; 23 } 24 tr { 25 padding: 0; 26 border: 0; 27 margin: 0; 28 } 29 td { 30 /* top border counts as part of height, but 31 left border doesn't count as part of width. 32 go figure. 33 */ 34 min-height: 99px; 35 height: 99px; 36 max-height: 99px; 37 min-width: 99px; 38 width: 99px; 39 max-width: 99px; 40 padding: 0; 41 border-left: 1px solid black; 42 border-top: 1px solid black; 43 border-right: none; 44 border-bottom: none; 45 margin: 0; 46 font-size: 12px; 47 text-align: left; 48 vertical-align: top; 49 font-family: monospace; 50 } 51 </style> 52 <script type="text/javascript"> 53 var val = 900; 54 function scroll() { 55 var div = document.getElementById('nest'); 56 div.scrollLeft = val; 57 div.scrollTop = val; 58 document.documentElement.removeAttribute('class'); 59 } 60 61 window.onload = scroll; 62 </script> 63 </head> 64 <body> 65 <div style="color: red">this text is above the scrolling div. the div below is 300x400</div> 66 <div id="nest" style="overflow: scroll; height: 400px; width: 300px; border: solid 1px black"> 67 <div style="background: blue; width: 5000px; height: 5000px;"></div> 68 </div> 69 <div style="color: red">this text is below the scrolling div</div> 70 </body> 71 </html>