TwentyTwelve sidebar to content height

  • WiSch

    (@wisch)


    11 years, 2 months ago

    Hello.
    I’ve searched and tried a lot but didn’t get it work.
    How can a adjust the height of the sidebar in my twentytwelve-childtheme to the same height of the content?
    I need that not for an backround, I want to insert a sidebar-widget that always sits on the bottom of the page/sidebar.
    Any ideas?

    Thanks a lot,
    WiSch

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter WiSch

    (@wisch)

    11 years, 2 months ago

    Hi.
    OK, I created an custom widget wich got the an own class.
    Then I inserted the following CSS into my style.css:

    @media screen and (min-width: 600px) {
#secondary {
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
  }
  .wrapper {
    position: relative;
  }
  .sidebar-wisch {
    position: absolute;
    bottom: 0;
  }
}

    Now nearly everything works except one thing:
    If the content is to short, the sidebar overlaps instead of take the needed height… 🙁

    Anyone can help?

    Thanks,
    WiSch

    Thread Starter WiSch

    (@wisch)

    11 years, 2 months ago

    Hi again.
    As a workaround I now inserted a JavaScript into the HEAD:

    <script type="text/javascript">
window.onload=function()
{
 var hoehe = document.getElementById('primary').offsetHeight;
 var breite = document.getElementById('primary').offsetWidth;
 if (hoehe > 600 && breite > 600) {
   var css = document.createElement("style");
   css.type = "text/css";
   css.innerHTML = "#secondary { position: absolute; top: 0; bottom: 0; right: 0; } .widget-area .sidebar-wisch { position: absolute; }";
   document.body.appendChild(css);
   document.getElementsByTagName("head")[0].appendChild(css);
 }
}
</script>

    And changed the CSS to:

    #secondary {
    /* Content high enough? Than JS in HEAD will change position! */
    position: relative;
  }
  .wrapper {
    position: relative;
  }
  .widget-area .sidebar-wisch {
    /* Content high enough? Than JS in HEAD will change position! */
    position: relative;
    margin-bottom: 0;
    bottom: 0;
    border: 0;
    padding-bottom: 0;
  }

    But I’d prefer a solution without JS…
    Anybody nows one?

    Thanks,
    WiSch

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘TwentyTwelve sidebar to content height’ is closed to new replies.