Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIV 100% height minus header

Status
Not open for further replies.

Doc1355

Technical User
Nov 6, 2011
4
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:

In that code, I want the brown and green DIV boxed to fill the middle section.
I appreciate your help in advance.
 
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
 
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.
 
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
 
Hey Frank, do you go around looking for "sticky footer" threads and posts :D



Chris.

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

Part and Inventory Search

Sponsor

Back
Top