TwentyTwelve sidebar to content height
-
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
-
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,
WiSchHi 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
- The topic ‘TwentyTwelve sidebar to content height’ is closed to new replies.