Same length sidebar

[Sue]

I have been trying to make it so that my sidebar is never longer than the main content area. Below is what I found on this support forum, but it doesn’t work. The sidebar is still longer. (I selected the Events page in the URL below because the content area is almost always shorter than the sidebar.)

Add Elements -> Hook -> wp_footer

<!– Requires Spacing 0.9 or GeneratePress 1.1.10 –>
<style>
.inside-left-sidebar,
.inside-right-sidebar {
background: #FFF;
}
</style>
<script type=”text/javascript”>
(function($) {

$.fn.equalHeightColumns = function(options) {

defaults = {
minWidth: -1, // Won’t resize unless window is wider than this value
maxWidth: 99999, // Won’t resize unless window is narrower than this value
setHeightOn: ‘min-height’ // The CSS attribute on which the equal height is set. Usually height or min-height
};

var $this = $(this); // store the object
options = $.extend({}, defaults, options); // merge options
// Recalculate the distance to the top of the element to keep it centered
var resizeHeight = function() {

// Get window width
var windowWidth = $(window).width();

// Check to see if the current browser width falls within the set minWidth and maxWidth
if (options.minWidth < windowWidth && options.maxWidth > windowWidth) {
var height = 0;
var highest = 0;

// Reset heights
$this.css(options.setHeightOn, 0);

// Figure out the highest element
$this.each(function() {

height = $(this).outerHeight();

if (height > highest) {
highest = height;
}

});

// Set that height on the element
$this.css(options.setHeightOn, highest);

} else {
// Add check so this doesn’t have to happen everytime
$this.css(options.setHeightOn, 0);
}
};

// Call once to set initially
resizeHeight();

// Call on resize. Opera debounces their resize by default.
$(window).resize(resizeHeight);
// Also check if any images are present and recalculate when they load
// there might be an optimization opportunity here
$this.find(‘img’).load(resizeHeight);
// If afterLoading is defined, add a load event to the selector
if (typeof options.afterLoading !== ‘undefined’) {
$this.find(options.afterLoading).load(resizeHeight);
}
// If afterTimeout is defined use it a the timeout value
if (typeof options.afterTimeout !== ‘undefined’) {
setTimeout(function() {
resizeHeight();
// check afterLoading again, to make sure that dynamically added nodes are present
if (typeof options.afterLoading !== ‘undefined’) {
$this.find(options.afterLoading).load(resizeHeight);
}
}, options.afterTimeout);
}

};
jQuery(window).load(function($) {
var columns = jQuery(“.site-main, .inside-left-sidebar, .inside-right-sidebar”);
jQuery(columns).equalHeightColumns({
minWidth: 960,
afterLoading: ‘iframe, .facebook’,
afterTimeout: 800
});
});

})(jQuery);
</script>

[David]

Hi there,

do you want the ‘white’ background to fill the space of the main container?

If so try this CSS:

@media (min-width: 769px) {
    .site-content {
        display: flex;
    }
    .site-main, .site-main article, .site-main .inside-article {
        height: calc( 100% - 18px);
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sue]

That was a big improvement, but now, for some reason, the white content area extends into the footer.

[Tom]

Hi there,

Try removing the javascript you’ve added.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sue]

Not sure if this is what you were referring to, but I think this did the trick: I changed -18 px to -25px.

.site-main, .site-main article, .site-main .inside-article {
height: calc( 100% – 25px);
}
}

Thank you!!

Edited to add: I removed the code below from the hook, and then changed the height calc to 16.75 and that also worked.
jQuery(window).load(function($) {
var columns = jQuery(“.site-main, .inside-left-sidebar, .inside-right-sidebar”);
jQuery(columns).equalHeightColumns({
minWidth: 960,
afterLoading: ‘iframe, .facebook’,
afterTimeout: 800
});
});

})(jQuery);

[Tom]

You shouldn’t need any javascript with the solution David provided.

Glad you got it working 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sue]

Thanks! Marking as resolved.

[Tom]

No problem!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts