DIV cuadrado donde la altura es igual a la ventana gráfica

Necesito crear un DIV donde width=height y height=100% de la ventana (que, obviamente, es variable).

En otras palabras, un DIV perfectamente cuadrado que calcula sus dimensiones en función de la altura de la ventana gráfica . Los elementos dentro de ese DIV tomarán sus dimensiones como porcentajes del alto y ancho del DIV padre.

Me parece que esto debería ser simple de hacer en CSS , ¡pero me he quedado atascado! Cualquier puntero sería muy apreciado.

Puede hacer esto con jquery (o javascript puro si lo prefiere).

Con jquery:

 
$(document).ready(function(){ var height = $(window).height(); $('#square').css('height', height); $('#square').css('width', height); });

Hay un buen truco usando css puro con el que tropecé:

 #square { width: 100%; height: 0; padding-bottom: 100%; } 

Espero que ayude.

http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/

Solución CSS única: unidades vh

Para hacer que el elemento cambie de tamaño según la altura de la ventana gráfica , puede usar unidades vh:

vh: 1/100 de la altura de la ventana gráfica. [ fuente MDN ]


Ejemplo:

 body{margin:0;} div{ background:gold; height:100vh; width:100vh; } 
 

CSS3 tiene una forma de hacerlo usando vw, ancho de ventana gráfica y vh, altura de la ventana gráfica. Con estas medidas, 100vw es todo el ancho de la ventana gráfica y 100vh es la altura total. Aquí encontrará más información sobre los valores relativos de css3 y las unidades.

Al escribir esto, el único soporte es sin embargo para Internet Explorer 9, por lo que probablemente esto no sea lo que estás buscando, pero es algo bueno a tener en cuenta cuando recibas soporte en el futuro.

Un truco adicional que surgió para ayudar a resolver parcialmente este problema, para cualquiera que tropiece con esta página … Ejecute el siguiente código en el evento de carga de su página:

 $('body').css('font-size',$(window).height()/100) 

Esto significa que la unidad css “em” es igual a la centésima parte de la altura de su página. Ahora puede usar esto arbitrariamente en su archivo CSS para dimensionar cualquier elemento relacionado con la altura de su ventana gráfica. Esto es más genérico que las otras soluciones enumeradas aquí. Y lo más probable es que desee ajustar el tamaño de todos los elementos de su página para tener en cuenta la altura de su ventana gráfica. Por ejemplo, si ahora quieres crear tu cuadrado, simplemente puedes escribir:

 #square{width:100em;height:100em} 

Por supuesto, también tendrá que tener esto en cuenta para cualquier texto en su página (ya que este truco afecta el tamaño de la fuente)

Podría usar Javascript y obtener el tamaño de la pantalla. Después de lo cual puede establecer el ancho y la altura en consecuencia.

window.screen.width y window.screen.height deberían funcionar.

A continuación, puede utilizar esta información y generar un poco de CSS para que la página se muestre en consecuencia.

No sé si estoy haciendo esto bien, pero si quieres configurarlo al 100% de la altura de la ventana gráfica, puedes hacer esto fácilmente en css:

 .stuff { background:#DDD; display:inline-block; height: 100vh; width : 100vh; } 

Puedes verlo aquí