Height:100% and Sticky Footer layouts. The final battle
CSS wonderland. My dream is to understand at least the 100% layout with sticky footer and header. I've been browsing the web and found five+ different ways to do that.
http://ryanfait.com/sticky-footer/
http://www.visibilityinherit.com/code/height-stickyfooter-centered.php
http://www.cssstickyfooter.com/using-sticky-footer-code.html
http://css-tricks.com/snippets/css/sticky-footer/
http://bonrouge.com/hcf-fluid.php
I believe that ther开发者_C百科e is some kind of common denominator. I want all the planet to know it!
I ask you to compare these practices deeply and can tell what pitfalls each one contains. Which problems can happen with each layout? Is it possible to break it using floats inside, etc? What shouldn't I do with it? Which browser are not covered?
Examples are required
The common aspect of these is that margins are not included in the height of an element and can be negative. Setting the height to 100% sets the height of the content wrapping div to same height as the screen. Applying a negative margin to the element means that the next sibling begins within the element.
In the first example the content wrapper is div#wrapper and its next sibling is div#footer. First the height of the wrapper is set to the height of the screen (applying 100% height to #wrapper, body and html). This would cause the wrapper to take the entire view port and the footer to be out of sight. Applying a negative margin equal in value to the height of #footer moves the footer element up the page so that it is back within view.
I once found an amazing template that amazingly works on all browsers, even IE6, I cant remember the link, but here is the CSS and the HTML for it:
CSS:
body, html{
height: 100%;
}
body, p {
margin: 0; padding: 0;
}
#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}
#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}
#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}
/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}
#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
And here is the HTML:
<body>
<div id="wrapper">
<div id="header">
<div id="header_900">
<p>header</p>
</div><!--header_900-->
</div><!--header-->
<div id="content">
<div id="content_900">
<p>content</p>
</div><!--content-->
</div><!--content-->
</div><!--wrapper-->
<div id="footer">
<div id="footer_900">
<p>footer</p>
</div><!--footer_900-->
</div><!--footer-->
</body>
加载中,请稍侯......
精彩评论