Posted by david_p on February 16, 2012 at 12:03am
5 followers
Jump to:
| Project: | Sky |
| Version: | 7.x-2.3 |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
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?
| Attachment | Size |
|---|---|
| sidebar_block.jpg | 117.63 KB |
Comments
#1
There 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:
/**
* This will set sidebars and the main content column all to equal height:
* if (Drupal.jsEnabled) {
* $(document).ready(function() {
* $('#content-column, .sidebar').equalHeight();
* });
* }
*
* This will set all blocks in regions (not sidebars) to equal height:
* if (Drupal.jsEnabled) {
* $(document).ready(function() {
* $('#region-name .block-inner').equalHeight();
* });
* }
*/
jQuery.fn.equalHeight = function () {
var height = 0;
var maxHeight = 0;
// Store the tallest element's height
this.each(function () {
height = jQuery(this).outerHeight();
maxHeight = (height > maxHeight) ? height : maxHeight;
});
// Set element's min-height to tallest element's height
return this.each(function () {
var t = jQuery(this);
var minHeight = maxHeight - (t.outerHeight() - t.height());
var property = jQuery.browser.msie && jQuery.browser.version < 7 ? 'height' : 'min-height';
t.css(property, minHeight + 'px');
});
};
And call it with:
$(document).ready(function() {$('#content-column, .sidebar').equalHeight();
});
#2
Thanks Jeff. I'll try to implement it and report back.
#3
Works for me. Would be great, if I could just turn it on in theme setting like in Omega (sub-)theme.
#4
I 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.
#5
would 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...
#6
hello 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,