Cómo asignar a un DIV la misma altura de nuestra pantalla

Uno de los principios básicos que todo diseñador de webs debe de recordar es que, todo lo relacionado con la parte estética del contenido, se realice vía CSS. Sin embargo, en ocasiones, bien sea porque nos veamos limitados en conocimientos, bien sea porque así lo elegimos, puede que queramos recurrir a otros sistemas.

Así pues, en este artículo voy a explicar cómo asignar a un DIV (o Id), la misma altura que la de la ventana de nuestro navegador, usando para ello jQuery. Además, veremos cómo centrar verticalmente dicho DIV dentro de nuestra pantalla.

Estructura HTML:

Imaginad que tenemos un Id que hace las veces de “contenedor padre”. A este Id lo llamaremos “contenedor”. Dentro de este Id, introduciremos dos DIV’s. Uno que lo bautizaremos con la class=”flotante” y que no tendrá contenido alguno (como se intuye), y otro que alojará todo el contenido que queramos introducir. A éste último le asignaremos la clase=”midiv”.

Podríamos representarlo del siguiente modo:

<section class="contenedor">

<div class="flotante"></div>

<div class="midiv">

<p>Aquí introducimos el contenido</p>

</div>

</section>

El código jQuery:

El siguiente código, lo introduciremos en un “archivo satélite” que recogerá todas funciones jQuery. También podríamos introducirlo en el mismo archivo HTML, antes de la etiqueta </head>. En este caso, deberemos encerrarlo entre las etiquetas: <script type=”text/JavaScript”> y </script>.

$(window).load(function(){ //también podríamos usar $(document).ready(function(), aunque esto me ha dado problemas con el google chrome.
alturaventana = $(window).height(); //Calcula la altura de la pantalla, y la asigna a la variable alturaventana
alturamidiv = $(".midiv").height(); //Idem pero del div de clase "midiv
if (alturaventana>alturamidiv) { //es decir, si la altura de la pantalla es mayor a la del propio div
t = (alturaventana-alturamidiv)/2; //calcula el hueco que queda al restar del alto de la pantalla el div, y lo reparte entre dos. Este valor lo asigna a la variable "t".
$("#contenedor").css("height", alturaventana); // El contenedor ocupará la altura de la pantalla. Importante declarar el id con position: relativa en nuestro CSS.
$(".flotante").css("height",t); //aplica a la propiedad altura del div "flotante", el valor de la variable "t". El objetivo de este div, consiste en rellenar un hueco entre el contenedor padre y el div que aloja al contenido.
}else{ //es decir, si la altura del DIV es mayor a la de la ventana de nuestro navegador.
t = alturamidiv;
$("#contenedor").css("height", t); //Es decir, que la altura del contenedor padre, será la que ocupe el DIV que aloja el contenido por necesidad.
$(".flotante").css("height",70); //Le damos una altura en píxeles para forzar un distanciamiento (hueco) al título o primera línea del DIV.
}; });

Conclusión:

Puede que no sea una forma muy elegante de llevar a cabo nuestra propuesta. No obstante, podrás comprobar la funcionalidad de la misma en mi web: www.creadiweb.com

No olvides dejar algún comentario si te ha gustado este artículo.

Saludos,

 

Manuel Córdoba