Blogger: MORE y las columnas de igual altura

Hace un tiempo, en una de las entradas se mostraban algunos métodos para tener un diseño con columnas de igual altura..

Por defecto, la altura de cualquier elemento depende de su contenido así que es normal que la columna de entradas tenga cierto alto y la de la sidebar otro. En ciertos diseños, eso no es algo deseable ya que, por ejemplo, hay un color de fondo diferente y nos gustaría que, sin importar el contenido, todas llegaran hasta el final de la página.

La solución que más me gustaba para resolver el tema implicaba usar sólo CSS, agregando una serie de propiedades como:

margin-bottom: -32768px;
padding-bottom: 32768px;

Esto, tenía un beneficio, no usaba JavaScript pero, tenía una desventaja, los enlaces a posiciones exactas (#nombre) o aquellos que son anclajes no funcionan o, peor aún, "cortan" la página de tal modo que el blog se ve espantoso.

Hasta ahora, ese era un detalle menor en la mayoría de los casos pero, la nueva opción MORE lo ha transformado en un porblema serio ya que el enlace generado es, justamente de ese tipo: #more. Ese problema planteaba Emile en un comentario y, un poco después que era justamente ese detalle el que impedía ver las entradas de su blog de manera normal.

Hace ya mucho, Carlos me había enviado por mail una página donde se hablaba de un método para crar columnas iguales. No lo había probado y estaba allí en mis marcadores, esperando LLegó el momento de sacarlo a la luz porque parecería que resuelve el tema.

El artículo en cuestión es Height Fixer For Blogger y es fácil de implementar; basta agregar lo siguiente antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  onload=function() {
    var alturaMAIN = document.getElementById('main-wrapper').offsetHeight;
    var alturaSIDEBAR = document.getElementById('sidebar-wrapper').offsetHeight;
    if(alturaSIDEBAR>alturaMAIN) alturaMAIN=alturaSIDEBAR;
      document.getElementById('main-wrapper').style.height = document.getElementById('sidebar-wrapper').style.height = alturaMAIN+ 'px';
   }
//]]>
</script>

Sólo un detalle, asume que la columna de posts tiene un ID llamado main-wrapper y la columna de sidebar un ID llamado sidebar-wrapper. Si la plantilla posee otros IDs, deberá cambiarse el script para que verifique la altura correspondiente.

Este es un ejemplo online donde está aplicado el truco.

ACTUALIZACIÓN:

Un comentario de egoloco aporta una solución extra que bien podría ser útil en muchos casos.

El script original lo que hace es detectar si la altura de la sidebar es mayor que la altura del main y, si es así, hacer que este último se alargue para que ambos queden iguales.

Lo que él se pregunta es ¿qué pasa si ocurre lo contrario? Y responde: hay que alargar la sidebar así que acá va una variante que lo que hace es verificar cuál de las dos columnas es la más larga y darles a ambas la misma altura:

<script type='text/javascript'>
//<![CDATA[
  onload=function() {
    var alturaMAIN = document.getElementById('main-wrapper').offsetHeight;
    var alturaSIDEBAR = document.getElementById('sidebar-wrapper').offsetHeight;
    if(alturaSIDEBAR>alturaMAIN) {
      document.getElementById('main-wrapper').style.height = alturaSIDEBAR+ 'px';
    } else {
      document.getElementById('sidebar-wrapper').style.height = alturaMAIN+ 'px';
    }
  }
//]]>
</script>