DIV 100% height minus header

[Doc1355]

I have a simple HTML page with DIVs. Here is the simple deisgn:

Header
Top Horizontal menu
Left column and right content
Footer


I have the header, menu and footer with defined height (px). I want the two middle columns (left column and right content) to fill the browser vertically. I used height100% but nothing is working.
Keep in mind that the way I designed the CSS, my footer remains at the bottom of the browser all the time and I want to keep it that way.
Here is my codes. Take a look:

http://jsfiddle.net/tM7g7/

In that code, I want the brown and green DIV boxed to fill the middle section.
I appreciate your help in advance.

 

[ChrisHirst]

you need to set height 100% on the html and body elements to make them fill the viewport

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Doc1355]

Thank you for your reply. If you see the code, I have already setup html, body height to 100%. But the problem is that the "left column" and "right content" are not directly inside the body tag. They are within a second DIV called "container". I need to use the container DIV to make my page fixed width and center it on the screen.

 

[vacunita]

Sadly there's no real way to accomplish that with HTML alone.

DIV's have no way of knowing how much space is left to be filled in.

Giving your container 100% height will of course push it beyond the footer.

The real question would be why you want your footer fixed at the bottom of the browser port? What should happen if there is more content than can fit in the area between the footer and the menu bar.

I would assume you want the footer to be pushed down with the content?

If so perhaps simply giving your content a min-width would suffice.

I've never understood this need to have the footer affixed at the bottom of the browser port. Simply placing it after the content would keep it at the end of the page no matter how long it is.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[FrankknarF]

@Doc1355: the way to do it is described here: Create a Fixed ('Sticky') Footer with CSS. There are two methods, as you will see.

How to: Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

 

[darryncooke]

http://www.cssstickyfooter.com/

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[ChrisHirst]

Hey Frank, do you go around looking for "sticky footer" threads and posts



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[ChrisHirst]

http://www.modtalk.co.uk/_site/code/css/simple-layouts/two-column/

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum