div fijo al tamaño de ventana (indep. del contenido, tamaño de ventana y zoom)

_pitufo · #1 (**permalink**) 27/12/2011, 13:32

No estoy encontrando la manera de fijar un div al tamaño de ventana.

El html:

Código HTML:

<body>
	<div id="windowDiv">
		<div id="workspace">
				<!-- contenido -->
		</div>
	</div>
</body>

"workspace" es mucho más grande que "windowDiv", y "windowDiv" sirve para mostrar solo una parte del contenido de este. "workspace" será móvil para panear por el contenido.

El css:

Código:

#windowDiv {
	top: 0px;
	left: 0px;
	border: 3px solid;
	overflow-x: hidden;
	overflow-y: hidden;
}

#workspace {
	top: -300px;
	left: -500px;
	width: 5000px;
	height: 5000px;
	position: relative;
}

Lo importante es que "windowsDiv" se mantenga del tamaño de la ventana independientemente de:
que la ventana cambie su tamaño,
del tamaño de "workspace",
del zoom||tamaño de texto del navegador.

Las dos primeras las sé arreglar con javascript, pero tal vez haya una forma más adecuada con css. La tercera es la más difícil, ya que por lo que leí no hay un evento que dispare cuando se zoomea, y debería hacerse por medidas indirectas.

_pitufo · #2 (**permalink**) 27/12/2011, 17:50

Solucionado. Lo logré hacer con javascript y jQuery, así:

Código:

$(window).load(function() {    
	var pageWindow = $(window);
		
  	pageWindow.resize(function adjustWindowDivDimensions() {
		var windowDiv = $("#windowDiv");
		windowDiv.width(pageWindow.width());
		windowDiv.height(pageWindow.height());
		alert("resize");
    }).trigger("resize");
}

Lo increible es que el div se mantiene del tamaño de la pantalla cuando se cambia el tamaño de letra. Por lo visto, al cambiarse el tamaño de letra se dispara el mismo evento "resize" que cuando se cambia el tamaño de la ventana.

Además descubrí que si intentas correr un alert("algo") "onresize", firefox 4 "crashea". [URL="https://bugzilla.mozilla.org/show_bug.cgi?id=626963"]https://bugzilla.mozilla.org/show_bug.cgi?id=626963[/URL], queda todo negro, primera vez que me topo con un bug de firefox. En chrome no se produce este error.