Another one of those 100% height threads (but different!)

**xlowpitch** · Dec 18, 2012 13:13

Hello everybody,

I've ran across this problem today that I simply cannot figure out how to solve, or whether what I'd like to do is actually possible with CSS.
Here's what I currently have: http://jsfiddle.net/qzNzc/ Now, what I'd like to do is have the backgrounds of the .contentcontainer and .maincontent divs meet up with the footer at the bottom. Not that big of a problem for .contentcontainer, however, I'd like .maincontent to have a bottom margin of 20px, just like at the top, and I simply don't know how I could achieve that.

Any ideas? Possibly javascript solutions if impossible with CSS?

**ralph.m** · Dec 18, 2012 16:56

Hi xlowpitch. Welcome to the forums.

You could try something like this:

Code:

.contentcontainer {
position: relative;
width: 940px;
min-height: 100%;
height: 100%;
margin: auto;
padding: 20px 10px;
overflow: hidden;
background-color: #E0E0E0;
display: table;
}

.maincontent {
position: relative;
width: 920px;
margin: 20px auto;
padding: 20px 10px;
background-color: #FAFAFA;
display: table-cell;
}

Add in the red bits and get rid of the ~~strikethrough code~~. This may not work too well on all browsers, so check it out. I tested only in Chrome.

**Paul O'B** · Dec 18, 2012 17:22

Hi Welcome to Sitepoint

I'm afraid that your design has a number of logic errors and the main one is that you can't use 100% height on your inner elements like that as it restricts the content to 100% only and no more. Just add content to go below the fold and see what I mean

Read the CSS faq on 100% for a full understanding as it is more complex than you may think. Also have a look at the sticky footer css faq as that covers all the techniques I will show below.

You only have one shot at 100% and that has to be done with min-height:100% based on a 100% high html and body. No other nestings can carry the 100% height so you have one shot to do it all.

The easiest way to do this is to use the sticky footer approach combined with a modified version of my absolute overlay technique to create a full length background as required.

Here is the code:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
	margin:0;
	padding:0
}
html, body {
	height:100%;/* needed to base 100% height on something known*/
	text-align:center;
}
/*Opera sticky footer Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#outer:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
h1, h2, p { padding:0 10px; }
#outer {
	width:960px;
	background:#ccc;
	margin:auto;
	min-height:100%;
	margin-top:-160px;/* header height - this drags the outer  up to the top of the monitor */
	text-align:left;
	clear:both;
	position:relative;
	z-index:1;
}
* html #outer { height:100% }
#header, #footer {
	width:100%;
	min-width:960px;
	background:#000;
	color:#fff;
	clear:both;
	position:relative;
	z-index:2;
}
#header { height:160px; }
#footer {/* footer now sits at bottom of window*/
	height:90px;
	margin-top:-90px;/* drag into viewport*/
	clear:both;
}
.inner {
	width:960px;
	margin:auto;
	position:relative;
	z-index:2;
}
#outer .inner {
	padding:190px 20px 120px; /* soak up negative margins */
	width:920px;
}
.bg1 {
	position:absolute;
	top:180px;
	margin-left:20px;
	bottom:110px;
	background:gray;
	width:920px;
	z-index:1;
}
</style>
</head>
<body>
<div id="header">
		<div class="inner">
				<h1>Sticky Footer</h1>
		</div>
</div>
<div id="outer">
		<div class="inner">
				<h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ probably every other modern browser</a>)</h2>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
		</div>
		<!-- bg1 just hold the background and no content -->
		<div class="bg1"></div>
</div>
<div id="footer">
		<div class="inner">
				<p>Footer</p>
		</div>
</div>
</body>
</html>

This assumes that the header and footer are a fixed height because you need to account for their dimensions. That is one of the drawbacks of a sticky footer approach.

**xlowpitch** · Dec 18, 2012 19:57

Thanks both of you for the quick replies!

Ralph, I tried out your suggestion but it broke my layout in Firefox 16. I think you might be onto something though, I'll check that out further tomorrow as it's pretty late over here right now (Germany).

Paul, thanks so much for the help. I see what you mean about my misunderstanding of the height property. Also, I already read about your absolute overlay solution in another thread, unfortunately this does not help in this case. I might have left out some crucial elements whilst trimming down my code for the jsfiddle, sorry about that. The thing is, between header and main content there's supposed to be another div of changing height, so I can't position the overlay n pixels from the top as the background might otherwise not line up properly with where the main content begins.

I did come up with a solution myself though, however, it is a little wonky haha. It's basically a variation of the faux column trick, applying repeated background images to body and footer to fake the different background colors and bottom margin of main content and content container, the latter two also still having their actual background colors applied to them, so the body background image is blocked out at the top, creating a margin that's always the correct size, no matter the height of the div between header and main content. (Did anybody get that? I'm not very good at explaining things haha)

**ralph.m** · Dec 18, 2012 20:58

Originally Posted by xlowpitch

I did come up with a solution myself though, however, it is a little wonky haha.

Feel free to post it here, as I'm sure any issues can be sorted. Sorry for my lame attempt above—I knew it wasn't really adequate. Paul is an expert at this stuff, though, so I'm sure he at least will have a solution for you, if no one else.

**Paul O'B** · Dec 19, 2012 03:34

The thing is, between header and main content there's supposed to be another div of changing heigh

You can do that easily with my demo by just crating another div and then rub out the background to produce the illusion of separate elements.

e.g.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
	margin:0;
	padding:0
}
html, body {
	height:100%;/* needed to base 100% height on something known*/
	text-align:center;
}
/*Opera sticky footer Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#outer:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
h1, h2, p { padding:0 10px; }
#outer {
	width:960px;
	background:#ccc;
	margin:auto;
	min-height:100%;
	margin-top:-160px;/* header height - this drags the outer  up to the top of the monitor */
	text-align:left;
	clear:both;
	position:relative;
	z-index:1;
}
* html #outer { height:100% }
#header, #footer {
	width:100%;
	min-width:960px;
	background:#000;
	color:#fff;
	clear:both;
	position:relative;
	z-index:2;
}
#header { height:160px; }
#footer {/* footer now sits at bottom of window*/
	height:90px;
	margin-top:-90px;/* drag into viewport*/
	clear:both;
}
.inner {
	width:960px;
	margin:auto;
	position:relative;
	z-index:2;
}
#outer .inner {
	padding:170px 20px 120px; /* soak up negative margins */
	width:920px;
}
.mid{
	background:#666;
	border-bottom:20px solid #ccc;	
}
.bg1 {
	position:absolute;
	top:180px;
	margin-left:20px;
	bottom:110px;
	background:#aaa;
	width:920px;
	z-index:1;
}
</style>
</head>
<body>
<div id="header">
		<div class="inner">
				<h1>Sticky Footer</h1>
		</div>
</div>
<div id="outer">
		<div class="inner">
				<div class="mid">
								<h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ probably every other modern browser</a>)</h2>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				</div>
				<h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ probably every other modern browser</a>)</h2>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
				<p>test</p>
		</div>
		<!-- bg1 just hold the background and no content -->
		<div class="bg1"></div>
</div>
<div id="footer">
		<div class="inner">
				<p>Footer</p>
		</div>
</div>
</body>
</html>

You need to be very careful of the details or you will lose content. In your original example you not only limited the page to 100% you made the initial page 100% + 160px high thus forcing the user to scroll to see a footer when there was no need to scroll. The sticky footer approach I used is tried and trusted and combats these issues but does nee to be done correctly or one browser or another will break.

The display:table approach can also work for sticky footers (ie8+) but you still have the same obstacles to overcome when you have full width headers and footers into the mix.

Here are some old example but refer to the code I posted above for the latest techniques.
http://www.pmob.co.uk/temp/sticky-footer-example.htm
http://www.pmob.co.uk/temp/sticky-fo...background.htm
http://www.pmob.co.uk/temp/sticky-fo...cal-center.htm
http://www.pmob.co.uk/temp/sticky-fo...ent-bottom.htm
http://www.pmob.co.uk/temp/sticky-fo...ackgrounds.htm

**xlowpitch** · Dec 19, 2012 05:12

I actually (kinda) used your footer in my first example. I took the one from the CSS FAQ, obviously I messed it up partly due to my misunderstanding of height 100% (was under the impression it meant an element would take on the height of whatever space there was minus already used space, not the whole viewport). I did now get it to work with your method. Not sure why I didn't think of simply blocking out the absolute overlay with the mid div when I first tried it out last night, but then did exactly that for my faux columns solution. It was a late night last night haha.

Either way, thanks so much for the help.

**Paul O'B** · Dec 19, 2012 07:28

No worries - glad it helped

User Tag List

Thread: Another one of those 100% height threads (but different!)

Thread Tools

Display

Hybrid View

Another one of those 100% height threads (but different!)

Bookmarks

Bookmarks

Posting Permissions