Hi everybody,
I'm struggling with the hoary problem of filling a page with css, even when the content doesn't reach the end of it.
I've been digging through many posts, forum and mailing lists and found hundreds variations of the same few tricks, but didn't find an ultimate one.

Since I wanted to have a very minimal and clean structure I opted for the fake, though effective, solution of styling the html and body so that inner elements seem to get to the end of the page even when they're not.
Here you can find an example:
Stylesheet here:

As you can see the whole structure works pretty fine but I couldn't figure out how to deal with the footer element.
But when the page's content doesn't fill the window (ie. in the index), the footer's margin property isn't enough to have it stuck on the bottom of the page (the footer is the rectangle saying "evoke.mapofemergence is a project...").

At first, I tried giving it an "absolute" position which worked fine for the pages not filling the window.
Example here:
Stylesheet here:
But, with this solution, for longer pages (such as this one) the footer is drawn over the content and not pushed at the very bottom of the containing div.

I hope you can help me out, since I really can't figure out how to solve this.
Thanks for your time and kind attention,

Member Avatar for diafol

how about position:fixed. This will keep the element static w.r.t while the page scrolls.

Hi ardav,
thanks for replying but, actually, I was trying to do the opposite.

I would have the footer element at the bottom of the html page, if it's higher than the browser window, while it should be at the bottom of the window if the html if shorter.

In short I would obtain this and this with a same css, while at the moment I could achieve the desired result for each case, only with different css properties ("position:absolute" in one case, "margin" in the other one)

I it makes sense...

how about position:fixed. This will keep the element static w.r.t while the page scrolls.

Member Avatar for diafol

Ah, OK. Have you tried position:relative? This should 'lock' it in place inside a container. If your element is within the footer (or similar 'div'), setting the position to relative *should* ensure that it stays put.

<!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">
	<title>Sticky Footer</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<style type="text/css">
		* {margin: 0;}
		html, body {height: 100%;}
		/* the bottom margin is the negative value of the footer's height */
		.wrapper {background:#ccc;min-height: 100%;height: auto;height: 100%;width:500px;margin: 0 auto -142px;}
		/* .push must be the same height as .footer */
		.footer, .push {height: 142px;}
		.footer {background:#eee;width:500px;margin:0 auto;}
	<div class="wrapper">
		<h1>Sticky Footer</h1>
		<p>Content goes here.</p>
		<div class="push"></div>
	<div class="footer">
		<p>Footer goes here.</p>

In the above code, the footer will be at the bottom of the browser window and if you add more content, the footer will still be at the bottom, but this time at the bottom of your content. As your can see, no need for position relative or absolute.

@colweb : Simple and elegant, definitely the solution I was looking for.

thanks a lot (and sorry for replying that late),

Sorry, but it crashes and burns when the content gets a bit long and then sits over the top of the footer which doesn't move downwards. Try adding 25 - 30 or so lines of fake content to see this. Number of lines depends on the size of your screen.

Crashed in Chrome, Firefox and IE.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.