CSS Sticky Footer Layout
It Sticks to the Bottom of the Page!
See that footer, way down there? It's stuck to the bottom of the page even when thin on content. Otherwise it would be floating halfway up the page.
Cross Browser Support for Sticky Footer Code
This sticky footer solution is working in all major browsers, including Chrome and IE 8! It works in HTML5 and with floated 2-column layouts and we don't get overlap in resized browser windows unlike older solutions you find when you Google sticky footer. You don't need an empty push div or cleafix hack. Here is how to use this sticky footer code.
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
Other Topics
CSS : Background-shortand property,CSS : Background image,CSS : Background color,CSS : Cascading order,CSS : Multiple style sheets,CSS : Inline styles,CSS : Internal style sheet,CSS : External style sheet,CSS : Class selector,CSS : Sticky Footer Layout,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,CSS : Id Selector
No comments:
Post a Comment