I'm resizing a panel to be the same height as the column to its left.

Here a bootply link

I resizes fine but the panels footer is stuck at the top. What is the best way to solve this?

Here's the js I'm using:

$(document).ready(function(){
    //Panels have a margin-bottom
    $topRightCol = $('.homepage-top-right-col .panel');
    $leftColHeight = $('.homepage-top-left-col').height() - 
        parseInt($topRightCol.css('margin-bottom')) -
        parseInt($topRightCol.css('borderBottomWidth'));
    $topRightCol.height($leftColHeight);

When I tried to set the height on the column class itself like this ('.homepage-top-right-col).height($leftColHeight) it didn't increase the height so I modified the panel instead.

I'm resizing a panel to be the same height as the column to its left.

Here a bootply link

I resizes fine but the panels footer is stuck at the top. What is the best way to solve this?

Here's the js I'm using:

$(document).ready(function(){
    //Panels have a margin-bottom
    $topRightCol = $('.homepage-top-right-col .panel');
    $leftColHeight = $('.homepage-top-left-col').height() - 
        parseInt($topRightCol.css('margin-bottom')) -
        parseInt($topRightCol.css('borderBottomWidth'));
    $topRightCol.height($leftColHeight);

When I tried to set the height on the column class itself like this ('.homepage-top-right-col).height($leftColHeight) it didn't increase the height so I modified the panel instead.

• javascript
• css
• twitter-bootstrap-3

1 Answer 1

Well..you could solve this with a bit of extra CSS, and position:absolute, if you aren't against that. I added these CSS styles:

.homepage-top-right-col > .panel{
    position:relative;
}
.homepage-top-right-col .panel-footer{
    position:absolute;
    width:100%;
    bottom:0;
}

This causes the .panel-footer of the right panel to always stick to its bottom, regardless of the panel's height. Here's a JSFiddle to show you what this achieves.

Hope this helps! If you have any questions, let me know.