Issue with 100% div height

JoelC · 07-29-2009, 10:41 PM

My content area currently scales the page down if the content overflows from it. This is great, and exactly what I want.

The issue is that when the content doesn't reach the footer, the div's height only matches it's content. I want it to reach the footer at all times (this means it has to be 100% of the page-container div - see diagram below).

All divs from #content and up to #page-contain have their min-height and height set to 100%. The only way I've managed to actually change the height of the div to a set height (not in percentage) and add overflow:hidden - neither of which I want, as the page should scale with resolution.

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

I've got a rather complicated site set up, with a whole bunch of divs and div containers. I've got them all there for a reason, so there are only 1 or 2 of these which I can maybe get rid of.

I'll try to lay it out for you.

page-container - contains everything except the footer (raised with a negative margin for the footer).
- header
- widthset - this is because some pages have 100% width and some have less. basically it sets the width of the menu/content area.
  - menu
  - content-contain - I tried setting this up right now to fix this issue. Didn't really help.
    - content
footer - (outside the page-container div)

I have colored the divs in my site so you can better understand where everything is, the colors are: #page-contain #widthset #content-contain, while #content remains it's natural light grey.

Check the "about" page and click on the headers. They will scale down and show you how the site currently responds to overflow.

Here are links for your comfort:
THE WEBSITE

THE CSS FILE

Thanks in advance for you time, this has really been driving me crazy for the past couple of days.

BoldUlysses · 07-30-2009, 01:22 AM

Something like a sticky footer? The footer sticks to the bottom of the page if the content doesn't reach it, but when the content is long enough the footer flows beneath the content as the page scrolls?

The catch is that you kind of have to start with the template and build your site around it. I've not had much success trying to incorporate it retroactively into sites I've already made, at least.

Here's a gutted template I made, if you're interested in just the basics:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

	<title>Template 14</title>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<style type="text/css">
	
		* {
			margin: 0;
		}

		html, body {
			height: 100%;
		}

		.wrapper {
			background:#ccc;
			min-height: 100%;
			height: auto !important;
			height: 100%;
			width:500px;
			margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
		}

		.footer, .push {
			height: 142px; /* .push must be the same height as .footer */
		}
		
		.footer {
			background:#eee;
			width:500px;
			margin:0 auto;	
		}
		
	</style>

</head>
<body>

	<div class="wrapper">

		<div class="header">
			<h1>CSS Sticky Footer</h1>
		</div>
			
			<p>Content goes here.</p>
			
		<div class="push"></div>

	</div>

	<div class="footer">
		<p>Footer goes here.</p>
	</div>

</body>
</html>

Edit: Looks like you already have a form of the sticky footer. I'm probably misunderstanding your question--my mistake.

JoelC · 07-30-2009, 01:29 AM

Hey, thanks for the try :P But yeah, I've already got something like that sticky footer integrated. The issue is that I want my content div (with the grey background) to always scale down until it reaches the footer - even when the content isn't enough to reach it.

Any idea?

BoldUlysses · 07-30-2009, 01:40 AM

Ah. If the div is a fixed width, you might consider a faux column placed as a background on the html or body tag and repeated-y.

JoelC · 07-30-2009, 01:51 AM

That's the thing, the div is only a fixed width on some pages. On others (portfolio), the div is set to become wider using javascript. Thanks for the tip, though, it might help me on another site I'm planning at the moment

Any idea how I can scale the div to 100% regardless of content and have it push the div down when content passes it? As in, an actual min-height of 100%.