Question

I’ll try and format the post so it’s accessible:

• The problem:

I’m having a bit of a frustrating time trying to get one column div (a sidebar) to match the height of either its parent, or the column to its left. I’ve tried doing it by pure CSS and then by jQuery and thus far haven’t been able to find a resolve.
The content inside the page is content-managed (WordPress + Boostrap), and the base itself is used as a template for three other pages, so a fixed-height solution wouldn’t really be useful here.

Also there are the remnants of the last jQuery attempt I tried, from a solution on StackOverflow for another – quite similar- problem. This didnt work out, but I’ve left the code in (colh-parent on the parent div, colh-child on the two child columns and jQuery in the header) in case it helps anyone understand what I’m trying to achieve.

I’ve also tried a method involving floating the parent container and the children whcih didn’t seem to have any effect either. I’m not too experienced at the moment, and this problem seems to be a little over my head.

• The page in question:

http://okamistudio.com/ssawp/pennants/

• The goal:

I’m trying to make the blue side strip meet the bottom of the white page, like in this page (though in that page it’s being forced down by the content):

http://okamistudio.com/ssawp/about-us/

What I’m trying to achieve is for the blue background of the sidebar (div.subpage-sidebar) to meet the bottom of the white strip. As I understand it this would require its parent (div.span3) to meet the height of either its partner column (div.span6) or the parent (div.row / .colh-parent).

Answer 1

You can solve this using absolute positioning for the sidebar. Maybe not the most desirable depending, but I have tested it and it seems to look exactly like you want.

.colh-parent {
    position: relative;
}
.span3 {
    position: absolute;
    right: 0;
    height: 100%;
}