Something that has come up many times in support is how to get the height of your content area to match the height of your sidebar. This tutorial will go over how to do that using jQuery. Guy B came up with this solution in the forum and it works wonderfully.
Step One: Assign classes to your blocks
First things first, assuming you have a content block and then a widget block, open up the block options for each one and give each one a unique custom class. I’m giving my widget block a custom class of main-sidebar and my content block a custom class of main-content.
Here’s what the custom class for my widget block looks like
Step 2: Add the jQuery needed
Copy and paste the following script into WordPress » Headway » Options » Scripts/Analytics » Footer Scripts
<script>
(function ($) {
var maxHeight = 0;
$(".main-sidebar").each(function () {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(".main-content").height(maxHeight);
})(jQuery);
</script>
Lastly, in that code where you see main-sidebar change that to the class you added for whichever block is going to have the largest/longest height. In my example, this is the sidebar.
Where you see main-content, change that to the class you added to the block that will be the shorter block.
You could also use block IDs but they are harder to find (you need to use browser developer tools or extensions/addons like Firebug to do so).
Save your settings.
Done!
That was easy and relatively painless, right?
Caveat: jQuery needs to be loaded on the page(s) you want to use this on. If not, you will need to enqueue jQuery too.
