|
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> |