Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Javascript que contiene a Jquery/Prototype: Posicionamiento de pie de página cuando la altura del área visible es mayor que la del documento

Datos de búsqueda

Jquery/Prototype: Posicionamiento de pie de página cuando la altura del área visible es mayor que la del documento

Actualizado: Añadida versión para Prototype.

En ocasiones tenemos el típico diseño en el que el fondo de cabecera y de pie de página ocupan todo el ancho visible, sea cual sea. Es tan simple como poner un fondo en el elemento BODY y otro fondo en el elemento HTML.

Pero hay un inconveniente que puede surgir fácilmente: ¿Y si el área visible del navegador tiene una altura mayor que la del documento? Nos encontramos que desde el final del pie hasta el final del área visible queda un hueco:

Esquema de hueco entre final del pie y final del área visible

En este caso lo que queremos es que ocurra lo siguiente:

Esquema de ausencia de hueco entre final del pie y final del área visible

De nuevo parece sencillo de solucionar: basta con dar posición relativa al elemento HTML y absoluta al elemento del pie de página para posicionarlo, y una altura mínima (con la propiedad min-height) al elemento HTML.

Pero, ¿Y si la altura del área visible varía durante la visualización de la página? Entonces habrá que obtener un medio por el que variar el tipo de posicionamiento del pie y la altura del elemento HTML: Habrá que calcular mediante Javascript la altura del documento y la del área visible. Y si es mayor la altura visible que la altura del documento añadir los estilos de altura y posicionamiento mediante Javascript.

He creado métodos para Jquery y Prototype para aplicar la solución anteriormente descrita (Ver ejemplo, abre en ventana nueva).

Método para Jquery

jQuery.fn.extend({  
  pieAlFinal: function(){  
    this.each(function(){
      var pie = $(this);
      pie.calcularPosicionamientoPie();
      $(window).resize(function() {
        pie.calcularPosicionamientoPie();
      });
    });
  },
  calcularPosicionamientoPie: function () {
    this.each(function(){
      var pie = $(this);
      var elementoHtml = $('html').eq(0);
      var altoDocumento = $('body').eq(0).height();
      var altoAreaVisible = $(window).height();
      var propiedadAlto = 'min-height';
      
      if (altoAreaVisible>altoDocumento) {
        elementoHtml.css({'position':'relative','min-height':altoAreaVisible+'px'});
        if(/MSIE 6.0/i.test(navigator.userAgent)) {elementoHtml.css({'height':altoAreaVisible+'px'});}
        pie.css({'bottom':'0','left':'0','position':'absolute'})
      } else {
        elementoHtml.css({'position':'','min-height':''});
        if(/MSIE 6.0/i.test(navigator.userAgent)) {elementoHtml.css({'height':''});}
        pie.css({'bottom':'','left':'','position':''})
      }
    });
  }
});

Y la llamada al método:

jQuery(document).ready(function () {
  jQuery('#pie').pieAlFinal();
});

Método para Prototype

Element.addMethods({
  pieAlFinal: function pieAlFinal (pie) {
    Element.calcularPosicionamientoPie(pie);
    Event.observe(window, "resize", function() {
      Element.calcularPosicionamientoPie(pie);
    });
  },
  calcularPosicionamientoPie: function calcularPosicionamientoPie (pie) {
    var elementoHtml = $$('html')[0];
    var altoDocumento = document.body.getHeight();
    var altoAreaVisible = document.viewport.getHeight();
    
    if (altoAreaVisible>altoDocumento) {
      elementoHtml.setStyle({position:'relative',minHeight:altoAreaVisible+'px'});
      if(/MSIE 6.0/i.test(navigator.userAgent)) {elementoHtml.setStyle({height:altoAreaVisible+'px'});}
      pie.setStyle({bottom:'0',left:'0',position:'absolute'})
    } else {
      elementoHtml.setStyle({position:'',minHeight:''});
      if(/MSIE 6.0/i.test(navigator.userAgent)) {elementoHtml.setStyle({height:''});}
      pie.setStyle({bottom:'',left:'',position:''})
    }
  }
});

Y la llamada al método:

document.observe("dom:loaded", function() {
  Element.pieAlFinal($('pie'));
});

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio