Help with Equal Height Columns in Fluid Width CSS

[Anonymous]

I’m working on a layout for a new website. Demo set up here: http://aarongmoore.com/test/layout.html

The page is intended to look like this: http://aarongmoore.com/test/images/sitedemo.png

The dark grey content area should be going to the bottom of the page, regardless of how much “content” is being displayed in it. I do not want a scroll bar in the dark gray area, I want the browser to scroll as it normally does with the navigation and logo staying static on the page.

I have tried setting the container to height: 100% but this doesn’t help because when there is more content than is able to fit in the browser, that content is cut off… instead of being able to scroll and see it.

This seems like a very simplistic layout in my mind but I can’t figure out how to make it happen in the CSS code. Help would be GREATLY appreciated!

[Paulie_D]

Unfortunately, although is looks at though it should be an easy layout problem it isn’t.

What you have is the old ‘faux column’ problem.

There are a couple of CSS solutions which will work with older browsers and a couple more ‘cutting edge’ solutions which could be used depending on how deep you need browser support to be.

Otherwise, it’s an easy JS solution

[Paulie_D]

@joshuanhibbert

Do I really have to sign up to see that answer?

[Paulie_D]

@joshuanhibbert

Yeah, I get that but can you make both table-cells 100% height of the **body**?

Oh, yes, you can: http://codepen.io/joe/pen/feqxG

I think.

[Anonymous]

Thanks @joshuanhibbert
I found a similar solution here http://j.eremy.net/equal-height-columns-with-gutters/

[Anonymous]

Thanks @jurotek … that’s what I’d done already. The link I posted noted that the gutters aren’t necessary so I didn’t include them.

[Author]

Posts