I recently found how to make 100% height here:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
My question is, if i delete the div <div class="push"></div> and change the CSS property
.footer, .push {
height: 4em;
}
to
.footer, .wrapper:after {
height: 4em;
}
which seems to give the same effect but with less markup, what do you guys think? is it ok to do so? what about browser support?
No. Never ever use that sticky footer. It’s just terrible.
Your idea is fine. RyanFait didn’t do that originally since that example is years and years old.
I’m not trying to advertise my site in any way.
Use this.
Why is it terrible?
And well I got a solution given to me by Paul a long time ago but I thought there were new methods to do this since then, your solution seems to have many extra elements and CSS rules to achieve that effect, the solution given to me by paul has no extra markup but got some extra :before and :after rules.
Its something like this:
html, body {height:100%}
body:before {content:"";height:100%;float:left;width:0;margin-top:-32767px}
#container {min-height:100%;margin-top:-80px}
#container:after {clear:both;display:block;height:1%;content:" "}
#header {border-top:80px solid transparent}
#footer {height:80px}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
</div>
<div id="footer"></div>
</body>
</html>
Hi,
These days for IE8 and upwards (and all other browers) and for responsive design I use a much simpler method that is responsive and needs no set heights or pushers at all and will accommodate any footer content in a fluid environment.
The code is actually simpler also.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body,#wrap {margin:0; padding:0;height:100%;}
#wrap {display:table;width:100%}
header,.footer { background:#999; color:#fff; text-align:center;}
header, .footer, main { display:table-row }
/* height 1px on the header and footer is the sticky footer technique - height is treated as a minimum on table/cells/rows */
header, .footer{height:1px}
</style>
</head>
<body>
<div id="wrap">
<header>Fluid Height Sticky footer simple - IE8+ (no hacks )</header>
<main class="content">Content</main>
<footer class="footer">Sticky footer</footer>
</div>
</body>
</html>
You can see a full demo here.
I never use the old sticky footer any more and I just let IE7 and under have a normal footer when using this modern method above.
Thank you paul, great answer as always 
Btw do you have a modern reset CSS ?
You should customize this, but this is a good one.
Thanks Ryan,
Saw something very similar to this, was just wondering why they do not reset the <main> tag?
Hard to say. I don’t know. Probably because <main> doesn’t come with any default styles.
There are a number of resets around but I tend to use a minimalist version pertinent to the design in hand. I don’t see the point of adding in thousands of rules that will never be used.
I usually start with something like this although its not set in stone.
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* main CSS Document */
html, body, table {
margin: 0;
padding: 0;
font-size: 100%;
}
object, iframe, blockquote, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, fieldset, form, legend, table, caption, th, td {
margin: 0;
padding: 0;
border:none;
}
article, aside, figure,figcaption footer, header, nav, section, details, summary, main {
display: block;
}
ol {
list-style:outside decimal;
margin-left:1.5em
}
ul {
list-style:outside disc;
margin-left:1.5em
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align:top;
}
/* clearing technique */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html .clearfix{zoom:1.0}
*+html .clearfix{zoom:1.0}
a img, img {border:none;display:block}/* remove borders from linked images and set as block by default*/
a {text-decoration:none;}
a:link {color:#f00}
a:visited {color:#f00}
a:hover {text-decoration:underline;}
a:focus {outline:1px dotted #ccc}
/* clear extra padding on moz inputs */
input[type="submit"]::-moz-focus-inner {
padding: 0;
border: none;
}
input, textarea, select, label {
font-family: Arial; /* set font-family for IE*/
vertical-align:middle;
}
textarea {
resize:vertical;
overflow:auto
}
.offscreen {
position:absolute!important;
left:-999em!important;
top:-999em!important;
}
You may want to use this method of box-sizing if you are having modules installed from other sources and there are also some newer clearfix methods around but as they utilise both before and after pseudo elements then I find them less useful as I am always using before and after on elements for special effects.
The ‘main’ element is a new html5 element and the older resets don’t have it in place. You do need to set it to display:block (as with all the other html5 elements) as all html elements are inline by default. It’s the UA that applies the block display and so only the newer browsers will have it added to the default stylesheet. (Note for html5 elements you do need the html5shiv for ie8 and older).
Hi Paul,
Ok I would like some more explanations regarding what you posted:
article, aside, figure,figcaption footer, header, nav, section, details, summary, main {
display: block;
}
what is that clearing technique, to what do i usually apply this class? got any examples? and for what browsers is it used?
why isnt img enough in this css rule:
a img, img {border:none;display:block}
what is this .offscreen class?
Thanks for the answers
It’s the clearfix technique. Simple google results would have articles on it. It’s one of the best techniques.
Say you have this
asdf
The parent doesn’t recognize the childfloat as being a child of the parent, since it’s floated. Apply the clearfix as such
<parent class="clearfix">
<childfloat>asdf</childfloat>
</parent>
Then it contains the children.
Without knowing Pauls specific coding style / what he had planned for other stuff, I’d be guessing at his reset.
Yes well spotted, I must have removed it accidentally when formatting it for this post.
As Ryan said its commonly called the clearfix technique and should be in every one’s default stylesheet in some form or another. More info here.
A parent div that holds only floated content will on fact hold nothing and its height will be zero. The clearfix (hack) or other block formatting context methods (such as overflow:hidden) pull the parent around the float so that it contains the float. Everyone needs to understand this completely when working with floats.
Older versions of IE give images a (blue) border only when they are inside links so the UA stylesheet ‘theoretically’ styles them using ‘a img{}’ which means that we would need to use the same specificity to over-ride it. However, I think IE does this in some other way as specificity isn’t an issue here and img{border:none} would be enough but I leave the whole rule in place it in for old times sake.
Thanks for all the answers, but what that offscreen class used for?
Sorry, I missed that question
I use that when I want to hide some text (or some element) when perhaps using an image replacement technique. This allows the element to be hidden from sight but not from screen readers (as with display:none).
There are many other methods available but all depend on the situation in hand. It’s not necessarily something that you may want in your stylesheet but as I use it often I include it in mine.
Thanks for the answer, decided to use your reset stylesheet as a base with some changes.
About the 100% height example, i’m having hard time to get it to work when i want all the layout to be lets say 1000px but only the footer to stay streched to 100% of the screen, any ideas?
Do you have an example? Should be fairly easy. Make sure the footer is outside of all other elements…and set it to 100% width (or no width - doesn’t matter)
Then a container element can hold the rest of hte page and you can set that to max-with:1000px or something. Should try to make your page fairly fluid and responsive.
It’s easy to do as you just add an inner element inside each table-cell/row element and set that to max-width:1000px. The only drawback is that if you want the middle column background colour to extend then you lose older browsers in the process.
Here’s an example of what I think you want.
You can do it using the old fashioned method but then you lose the auto height and fluid width footer approach which is why I recommend not using that approach any more because we are in RWD mode these days and should avoid layouts that place constraints on the content in that way. The old fashioned sticky footer are really only suitable for a one line fixed height message such as a copyright or something similar. The display:table-method caters for fluid height and fluid width with ease and is perfect for responsive web design.
Well was wondering bout that, but thought there could be any solution without that extra markup needed.
Thanks for the answer!