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!
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.
Oh, sorry. Just saved me from typing it out again. Here it is:
What is the best technique for creating equal-height columns purely in CSS?
The 'best technique' is a little subjective, but to me, it is a semantic method that has good browser support.
While the flexible box layout module is fantastic, the browser support isn't great (http://caniuse.com/#search=flex). So with that in mind, I'd recommend the use of display: table;. It has much better browser support (http://caniuse.com/#search=table), while still remaining semantic.
The only things that you need to keep in mind is that you will need to use display: table-cell; on the elements you want to be equal height (and side by side), and display: table; on the parent element. You should also specify a width on the elements (especially the parent).
@aarongmoore, instead creating gutters (with extra mark up) by creating another element declared as table cell and giving it width, you can set border spacing on parent which is declared as table like this: http://codepen.io/joe/full/fLCpu
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!
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
Here's how I would do it: http://www.quora.com/Cascading-Style-Sheets/What-is-the-best-technique-for-creating-equal-height-columns-purely-in-CSS/answer/Joshua-Hibbert
@joshuanhibbert
Do I really have to sign up to see that answer?
Oh, sorry. Just saved me from typing it out again. Here it is:
What is the best technique for creating equal-height columns purely in CSS?
The 'best technique' is a little subjective, but to me, it is a semantic method that has good browser support.
While the flexible box layout module is fantastic, the browser support isn't great (http://caniuse.com/#search=flex). So with that in mind, I'd recommend the use of display: table;. It has much better browser support (http://caniuse.com/#search=table), while still remaining semantic.
Here is a live example of just how simple it is: http://jsfiddle.net/joshnh/7sff8/
The only things that you need to keep in mind is that you will need to use display: table-cell; on the elements you want to be equal height (and side by side), and display: table; on the parent element. You should also specify a width on the elements (especially the parent).
@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.
Thanks @joshuanhibbert
I found a similar solution here http://j.eremy.net/equal-height-columns-with-gutters/
@aarongmoore, instead creating gutters (with extra mark up) by creating another element declared as table cell and giving it width, you can set border spacing on parent which is declared as table like this: http://codepen.io/joe/full/fLCpu
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.