Free To Feel

Heading to entrepreneur.


Joshua Chi
Github

Pure CSS to make the footer at the bottom of the page

Pure CSS, no javascript to make the footer at the bottom of the page. Imaging you have the html layout like the following:

<body>

<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

</body>

What you will do is simple.

html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;/* Height of the footer */
background:#6cf;
}

Thanks to Matthew James Taylor who gives the idea how to implement this.

comments powered by Disqus