CODEWITHSUNDEEP
jqueryhtmlcss
Felix A J
Felix A J

Reputation: 6470

Equal height for sidebar when content varying height dynamically

I have a two column page with sidebar and content, both given equal height on window load and widow resize. Page is responsive.

I am using a jquery plugin mixitup (https://mixitup.kunkalabs.com/) for dynamically arranging blocks in the content area.

The problem is to re-adjust height of sidebar when number of blocks changes and the height of the content area also changes.

enter image description here

Upvotes: 1

Views: 899

Answers (2)

rasicoc
rasicoc

Reputation: 310

I am not aware of an easy way to do this in CSS that is cross-browser/works with older browsers, but if you are willing to use a small javascript function, you can pass in the elements you want to be the same height and it will set them all to the height of the tallest element.

function equalHeight($elements){
    var tallest = 0;
    $elements.height(auto);
    $elements.each(function(){
        var $this = $(this);
        if($this.height() > tallest){
            tallest = $this.height();
        }
    }
    $elements.height(tallest);
}

You can then run this at page load and after any page re-sizes. You will probably want to check to see if you've gone to a stacked layout for mobile and just set the height to auto in that case.

Upvotes: 0

Joseph Hansen
Joseph Hansen

Reputation: 13299

In the past, I've tried ways (with Javascript) to change the sizes to match like what you're asking for. Honestly, it's not a good solution.

If you wrap both the sidebar and the content in a container, then you can do this easily. I would recommend using flexbox. Your code might look something like this:

HTML:

<div class='container'>
    <div class='sidebar'>
    </div>
    <div class='content'>
    </div>
</div>

CSS:

.container {
    display: flex;
}
.sidebar {
    flex: 1;
}
.content {
    flex: 3;
}

Here is a guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox is well-supported nowadays and can automatically keep sizes the same.

Upvotes: 1

Related Questions