<!DOCTYPE html >
<html class="reftest-wait" >
<head >
<title >The Grid in an overflowing div </title >
<style type="text/css" >
html {
padding: 0;
border: 0;
margin: 0;
}
body {
padding: 0;
border: 0;
margin: 0;
}
table {
padding: 0;
margin: 0;
border-top: none;
border-left: none;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
tr {
padding: 0;
border: 0;
margin: 0;
}
td {
/* top border counts as part of height, but
left border doesn't count as part of width.
go figure .
*/
min-height: 99px;
height: 99px;
max-height: 99px;
min-width: 99px;
width: 99px;
max-width: 99px;
padding: 0;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: none;
border-bottom: none;
margin: 0;
font-size: 12px;
text-align: left;
vertical-align: top;
font-family: monospace;
}
</style >
<script type="text/javascript" >
var val = 100;
var max = 1000;
function scrollmore() {
if (val == max) {
document.documentElement.removeAttribute('class' );
return;
}
var div = document.getElementById('nest' );
div .scrollLeft = val;
div .scrollTop = val;
val += 100;
document.documentElement.offsetLeft;
setTimeout(scrollmore, 500);
}
window.onload = scrollmore;
</script >
</head >
<body >
<div style ="color: red" >this text is above the scrolling div . the div below is 300x400</div >
<div id="nest" style ="overflow: scroll; height: 400px; width: 300px; border: solid 1px black" >
<div style ="background: blue; width: 5000px; height: 5000px;" >text</div >
</div >
<div style ="color: red" >this text is below the scrolling div </div >
</body >
</html >
Messung V0.5 C=95 H=99 G=96
¤ Dauer der Verarbeitung: 0.19 Sekunden
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland