Height Issue

darren132 · #1 (**permalink**) 01-21-08, 03:26 PM

I have a fixed header and footer div height that are in pixels, but I would like the content div to expand in between them both so that the header is always at the top and the footer always at the bottom of the browser window while maintaining 100% overall height. I don't want the content div to collapse by using 'Auto', I want it to be the full height between the header and footer div.

Here's my code:

Code:

html, body {
	margin: 0;
	height: 100%;
}

#header {
	height: 90px;
	background-color: blue;
}

#content {
	height: 100%;
	background-color: red;
}

#footer {
	height: 50px;
	background-color: green;
}

-----------------

<body>
	<div id='header'>
	</div>

	<div id='content'>
	</div>

	<div id='footer'>
	</div>
</body>

How do I accomplish this?

darren132 · #2 (**permalink**) 01-22-08, 10:49 AM

I guess this is one of those problems that can't be solved in CSS. This is the reason why CSS sucks!

omniman · #3 (**permalink**) 01-23-08, 06:37 AM

Why would you say CSS sucks just because you didn't get a quick reply? If you did some quick searching, you surely could find an answer.

Either way, check out this tutorial - it will solve your problem for you:

http://www.themaninblue.com/writing/...ve/2005/08/29/

darren132 · #4 (**permalink**) 01-23-08, 01:58 PM

Quote:

Originally Posted by omniman

Why would you say CSS sucks just because you didn't get a quick reply? If you did some quick searching, you surely could find an answer.

Either way, check out this tutorial - it will solve your problem for you:

http://www.themaninblue.com/writing/...ve/2005/08/29/

The link still doesn't solve my problem. I've been talking with other programmers on another forum about the issue and they too are having difficulties fixing the problem. Some of them have told me that CSS can't do complicated layouts like the one I want and that I should just stick with using tables instead, so this is the reason why I said CSS sucks because CSS is "SUPPOSE" to be easier and do pretty much any kind of layout. I still use CSS for simple things like text styles, but so far it's been a pain in the *** for setting up complicated layouts. The only solution that I came come up with in order to fix the problem, would be to use Javascript, but I shouldn't have to use Javascript to try and "HACK" CSS, that's just stupid!

omniman · #5 (**permalink**) 01-23-08, 02:36 PM

What do you mean the link didn't solve it?

You want to footer to always be at the absolute bottom, correct? And the content will adjust accordingly?

Example with little content:
http://www.themaninblue.com/experime...mple_short.htm

Example with longer content section:
http://www.themaninblue.com/experime...ample_long.htm

If I understand what you want, this doesin fact offer the solution.

darren132 · #6 (**permalink**) 01-23-08, 07:23 PM

Quote:

Originally Posted by omniman

What do you mean the link didn't solve it?

You want to footer to always be at the absolute bottom, correct? And the content will adjust accordingly?

Example with little content:
http://www.themaninblue.com/experime...mple_short.htm

Example with longer content section:
http://www.themaninblue.com/experime...ample_long.htm

If I understand what you want, this doesin fact offer the solution.

Yes, but the entire page needs to be 100% to the browser height. This means a scrollbar needs to appear in the content area if the content in that area is bigger than the window.

Here's the actual layout that I'm looking for that's currently in tables, but I would like to convert to CSS: http://www.peoplelance.com/pictures/css_layout.png

The header, footer, red & blue bar have a fixed height in pixels. The issue however is that the content area where you see the yahoo website with the scrollbar must expand between the header and footer no matter what size of browser you are using and therefore, it can't have a fixed height. It needs to expand from top to bottom even if there's hardly any content in it. The red and blue bar are collapsable and are not always shown. The gray side bar is also collapsable. So what I need is CSS code that can make the content area (yahoo website) dynamic so that it can expand between the divs both in height and width.

Hopefully that explains things a little better.

omniman · #7 (**permalink**) 01-23-08, 08:03 PM

Ok, gotcha - now I understand what you want.

I certainly think it would be possible to do, but don't have the time to experiment with it right now. I will try to explore later or tomorrow.

If you figure it out before that, please post the result so I don't waste my time.

Thanks.

Walkere · #8 (**permalink**) 01-24-08, 02:31 PM

Quote:

Originally Posted by omniman

I certainly think it would be possible to do, but don't have the time to experiment with it right now. I will try to explore later or tomorrow.

Aye, definitely possible. Just worked out a sample.

Here's the basic idea.

Create a container div - 100% height.

Create three divs inside that container div - header, content, and footer. The height and top/bottom padding on these should work out to the full page height (which oddly enough is only 95% in the example I made).

Set the entire page to overflow: hidden and then set the #content div to overflow-y: auto. This will create a scroll bar if the content in #content is ever taller than the visible box.

I don't think it's quite perfect (for example I haven't figured out how to get the header and footer to have fixed heights while giving the content a height relative to the window size)... but it's a step in the right direction.

Good luck,
- Walkere

CSS from the sample:

Code:

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: gray;
}

#header {
  height: 10%;
  padding: 1%;
  margin: 0;
  background-color: red;
}

#header h1 {margin: 0; padding: 0;}

#content {
  height: 69%;
  overflow-y: auto;
  background-color: green;
  padding: 1%;
}

#footer {
  margin: 0;
  padding: 1%;
  height: 10%;
  background-color: blue;
}

darren132 · #9 (**permalink**) 01-24-08, 07:45 PM

Quote:

Originally Posted by Walkere

Aye, definitely possible. Just worked out a sample.

Here's the basic idea.

Create a container div - 100% height.

Create three divs inside that container div - header, content, and footer. The height and top/bottom padding on these should work out to the full page height (which oddly enough is only 95% in the example I made).

Set the entire page to overflow: hidden and then set the #content div to overflow-y: auto. This will create a scroll bar if the content in #content is ever taller than the visible box.

I don't think it's quite perfect (for example I haven't figured out how to get the header and footer to have fixed heights while giving the content a height relative to the window size)... but it's a step in the right direction.

Good luck,
- Walkere

It's a good try, but still doesn't work quite right. Like you said the header and footer don't stay a fixed height. You also start getting like a gray footer at the bottom of the blue footer when you minimize the browsers.

job0107 · #10 (**permalink**) 01-24-08, 10:24 PM

Quote:

Originally Posted by darren132

Yes, but the entire page needs to be 100% to the browser height. This means a scrollbar needs to appear in the content area if the content in that area is bigger than the window.

Here's the actual layout that I'm looking for that's currently in tables, but I would like to convert to CSS: http://www.peoplelance.com/pictures/css_layout.png

The header, footer, red & blue bar have a fixed height in pixels. The issue however is that the content area where you see the yahoo website with the scrollbar must expand between the header and footer no matter what size of browser you are using and therefore, it can't have a fixed height. It needs to expand from top to bottom even if there's hardly any content in it. The red and blue bar are collapsable and are not always shown. The gray side bar is also collapsable. So what I need is CSS code that can make the content area (yahoo website) dynamic so that it can expand between the divs both in height and width.

Hopefully that explains things a little better.

CSS is not a programming language. It is only a programming style sheet.
It is not capable of the complex logic you are trying to perform.

It will need some help from a programming language, to switch from one CSS to another. And to perform other functions.
Javascript would be best suited for your purposes.

The problems you will be facing is when you use fixed heights in the header and footer elements. And then you add and subtract them at will.

CSS alone can not compensate for these changes.
As you have already figured out is that you can't use 100% height on everything. The page soon gets larger than the window.

And even if you used percentages on all element heights,
you still have the problem of adding and removing header elements.

With Javascript, you can find everything about the browser window,
and it can perform the complex logic needed to manipulate your page.