Proper (Industry standard) way of setting footer - html

Question

What is the proper way of creating a footer div, I have normally used these codes below to set my footer div, I want to know how footer div is being coded industry-standard wise. How would I set the footer so it can go to the bottom of the screen whenever the content is filled up.
Here is my HTML:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Here is my CSS:
html {
background:white;
height:100%;
}
#wrapper {
width:960px;
margin-right:auto;
margin-left:auto;
}
#header {
background:#000000;
min-height:30px;
}
#content {
background:orange;
min-height:500px;
padding:20px;
}
#footer {
clear:both;
background:black;
min-height:30px;
position:relative;
}

Answer 1

If you're using any HTML version less than 5, then there really isn't a standard and what you've done is as good as many other layouts (although I'd always use classes and never IDs -- but that's a different topic)
If you're using HTML5, which you probably should do whenever you can, you should use the footer tag.
When using HTML5, here's a more standard way of laying out your page:
<header><nav></nav></header>
<main></main>
<footer></footer>
More information on HTML5 layouts is available here:
http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html
https://www.smashingmagazine.com/2009/08/designing-a-html-5-layout-from-scratch/