Sidebar auf gleiche Höhe wie den Content bringen (jQuery)

Das Problem besteht schon, solange es Webdesign gibt. Per CSS gibt es nur die bekannten Möglichkeiten per position:absolute; + top:0; + bottom:0; oder aber per background-image. Diese Möglichkeiten sind bei Flexiblen (responsive) Seiten allerdings oft unbrauchbar. Zudem hat die Absolute-Methode das Problem, dass hier die Sidebar keinesfalls länger sein darf als der Content, sonst überlappt diese in den Footer, oder sogar aus der Seite heraus.

Per jQuery ist das ganze natürlich kein wirkliches Problem:

/* Full Height Sidebar */
function fullHeightSidebar() {
  (function($) {

    jQuery(window).load(function (){ // execute when document.ready scripts are finished
      var heightContent = $('#content-column').height();
      var heightSidebar = $('.region-sidebar-second').height();

      if( heightContent > heightSidebar){
        $('.region-sidebar-second').css('height',heightContent);
      }
    });

  })(jQuery);
}

Hier ist das ganze schon in ein Resize Script gekapselt, dieses müsst Ihr bei euch ggf. ergänzen, damit es dann auch live, on resize, etc. funktioniert.

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert


    Der Zeitraum für die reCAPTCHA-Überprüfung ist abgelaufen. Bitte laden Sie die Seite neu.