Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Hello. I want to use a different color for my sidebar, and need to set up the sidebar's height to 100% of the main content area (otherwise it looks terrible, as seen on the attached image with the color changed to black). I have been playing with the CSS, but cannot find the way of changing the height. Any help?
Comment | File | Size | Author |
---|---|---|---|
sidebar_block.jpg | 117.63 KB | david_p |
Comments
Comment #1
Jeff Burnz CreditAttribution: Jeff Burnz commentedThere are two generally accepted ways of doing 100% height sidebars, 1) fake it with a tiling image, or 2) use an equal height JavaScript, there are many around but you will need one that can accept two classes, I have used this script a lot over the years, just be aware it does not react if the height of one of the columns changes, such as opening a collapsed block or fieldset etc:
You can use this exactly as is and it will work:
And call it with:
Comment #2
david_p CreditAttribution: david_p commentedThanks Jeff. I'll try to implement it and report back.
Comment #3
milos.kroulik CreditAttribution: milos.kroulik commentedWorks for me. Would be great, if I could just turn it on in theme setting like in Omega (sub-)theme.
Comment #4
Jeff Burnz CreditAttribution: Jeff Burnz commentedI used to have this as a theme setting, however its such an edge case (very few people want this compared to the amount of people who use the theme), so I removed it, no point in supporting things people hardly ever do.
Its also just a bad idea, believe me, doing equal heights with JavaScript has issues. There are better ways, so a theme setting is just rather silly for this.
Comment #5
zopa CreditAttribution: zopa commentedwould you mind sharing how to implement? which files should these lines be put and where within the files do you include these lines? sorry for the dumb question - i am new to drupal and unclear about how to employ equal heights javascript with my sidebar and content columns...
Comment #6
hoangbien CreditAttribution: hoangbien commentedhello Jeff,
I add this code to header, but it not work. i created a scripts.js with this code. so i call this scripts in mytheme.info. when i saw the script on sources of chrome. it mesage error $ in " $(document).ready(function() {
Uncaught TypeError: Property '$' of object [object Window] is not a function
$('#content, #sidebar-second').equalHeight();
}); "
How to fix it,
Thank you very much,