TwentyTwelve sidebar to content height

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

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