Full Height con JQUERY PHP, Programación - 25 de December de 2008 | 7:01 pm | 2 Comentarios



Tuve un problema, en una aplicación que estoy desarrollando, donde necesitaba que una capa tuviera la altura restante de la pantalla. Jquery me hizo la vida fácil, dado que mi aplicación es enteramente JS, puedo darme el lujo de usar este truco.

var top_header=200px;
$(window).resize(function() {
		$("#content").css('height', $(window).height()-top_header);
		});

Este codígo redimensiona la altura de un div con la altura de la pantalla restándole unos px, que podrían ser un header o alguna otra cosa.

Aunque creo que en algunos navegadores no se invoca el evento de resize una vez que se carga la página. Por lo que lo ideal seria ponerlo en el .ready().

Para quien le sirva.

Tags: ,



Entradas relacionadas

Leer mas


2 Responses to “Full Height con JQUERY”

  1. sgarza says:
    December 25, 2008 at 7:45 pm

    Nosotros le hacemos asi:

    Full Height:


    $('div.full-height').each(function(){
    $(this).css('height', $(this.parentNode).height() - ( $(this).outerHeight(true) - $(this).height() ));
    });

    Y para hacer columnas de la misma altura:

    Same Height:


    $('div.same-height').each(function(){
    var height = $(this).outerHeight(true) - ( $(this).outerHeight(true) - $(this).height() );
    $('> div', this).each(function(){
    $(this).css('height', height);
    });
    });

    Saludos.

  2. Bucio says:
    December 25, 2008 at 9:58 pm

    nosotros la estiramos

Leave a Reply