Así que tengo un problema que creo que es bastante común, pero todavía tengo que encontrar una buena solución. Quiero hacer que un div de superposición cubra la página ENTERA ... NO solo la ventana gráfica. No entiendo por qué esto es tan difícil de hacer ... He intentado establecer body, html heights al 100%, etc. pero eso no funciona. Esto es lo que tengo hasta ahora:
<html>
<head>
<style type="text/css">
.OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
body { height: 100%; }
html { height: 100%; }
</style>
</head>
<body>
<div style="height: 100%; width: 100%; position: relative;">
<div style="height: 100px; width: 300px; background-color: Red;">
</div>
<div style="height: 230px; width: 9000px; background-color: Green;">
</div>
<div style="height: 900px; width: 200px; background-color: Blue;"></div>
<div class="OverLay">TestTest!</div>
</div>
</body>
</html>
También estaría abierto a una solución en JavaScript si existe una, pero preferiría usar un CSS simple.