I've found 2 different implementations of a CSS sticky footer:
Ryan Fait sticky footer - http://ryanfait.com/sticky-footer/
Steve Hatcher sticky footer - http://www.cssstickyfooter.com/
Could someone explain the difference between how each of them work?
And if there are other known implementations, could you please post a comment or edit this question?
They are pretty similar in terms of function. The first forces a div to the full height of the page and then give it a negative margin the size of the footer.
html, body {
height: 100%; /*set 100% height*/
}
.wrapper {
min-height: 100%; /*content 100% height of page */
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* negative value causes wrappers height to become (height of page) minus 142px, just enough room for our footer */
}
.footer, .push {
height: 142px; /*Footer is the footer, push pushes the page content out of the footers way*/
}
What this does is makes sure that all content within the wrapping div is 100% of the page height minus the height of the footer. So that as long as the footer is the same size as the negative margin it will stick in the gap left and appear at the bottom of the element.
The second also forces the content to be 100% of the height of the page.
html, body {height: 100%;} /*set 100% height*/
#wrap {min-height: 100%;} /* make content 100% height of screen */
It then creates a space at the bottom of the main content the same size as the footer.
#main {overflow:auto;
padding-bottom: 150px;} /* wrapper still 100% height of screen but its content is forced to end 150px before it finishes (150px above bottom of screen) */
Then using position relative and a negative top margin forces the footer to appear 150px above its normal position (in the space it just made).
#footer {position: relative;
margin-top: -150px; /* Make footer appear 150px above its normal position (in the space made by the padding in #main */
height: 150px;
clear:both;}
Note: This only works so long as your page content is kept within .wrapper and #main inside #wrap respectively, and your footer is outside of these containers.
If you didn't understand any part of that leave me a comment and I'll try to answer it.
Edit: In response to user360122
HTML markup for first:
<html>
<body>
<div class="wrapper">
<!--Page content goes here-->
<div class="push">
<!--Leave this empty, it ensures no overflow from your content into your footer-->
</div>
</div>
<div class="footer">
<!--Footer content goes here-->
</div>
<body>
</html>
HTML markup for second:
<html>
<body>
<div id="wrap">
<div id="main">
<!--Page content goes here-->
</div>
</div>
<div id="footer">
<!--Footer content goes here-->
</div>
</body>
</html>
Remember to include the stylesheet and declare doctype .etc (these aren't full html pages).
There is an example in the bootstrap documentation which seems to be very simple: http://getbootstrap.com/examples/sticky-footer/
No wrapper or push needed.
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Related
I have a layout where I need to use height: 100% on html and body (and any wrapper divs I resort to using) to achieve an effect similar to pages, so that the content on my first "page" is centred, scrolling down the content on the second "page" is centred etc.
The html looks like this:
<section class="page" id="p01">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
<section class="page" id="p02">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
and the vertical centring etc. achieved with this styling:
body, .page {height: 100%; margin: 0 auto;}
.spacer {
float: left;
height: 50%;
margin-bottom: -150px;
}
.outer {
height: 300px;
width: 100%;
background-color: #fca;
clear: both;
position: relative;
display: block;
white-space: nowrap;
}
.inner {
width: 41%;
margin: 0 6%;
height: 300px;
background-color: green;
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.inner:first-child {
margin-right: 0;
}
You can see it at work in this fiddle:
http://jsfiddle.net/terraling/3V5rV/
The problem is the body background (here I'm just using color, but on my site it will be an image) leaks out into the body margins, i.e. the body content has a max-width and should be centred with white margins.
I can fix that either by... setting html background-color to white, as per
http://jsfiddle.net/terraling/yM53t/
...but body background becomes cutoff when scrolling into the second page (that wasn't a problem in the first fiddle).
Alternatively I could set the background image on a wrapper div and not on the body. That solves the problem of it leaking into the body margins, but it still has the same problem that it is cut off on scrolling.
(see: http://jsfiddle.net/terraling/3V5rV/1/ )
Any solution that involves removing the height: 100% declaration from any of html, body or wrapper collapses the layout (including replacing with max-height: 100%).
There's a whole lot of problems with this construct and not all of them can be solved, unfortunately.
The background issue
As you have seen yourself the background of body extends to the viewport if html does not have a background. That's solvable.
The float issue
When an element floats it does not contribute to the height of its parent element. So they don't grow (e.g. body does not expand). That can be solved if you can use alternatives. For vertically centering an element you could use display: table-cell e.g., which allows you to vertically center the content.
The height issue
This is where all hope is gone. height: 100% refers to the height of the parent, of course. The parent of body is html which in turn is the child of the viewport. You gave html the size of 100% (= the size of the viewport) and body the size of 100% (= size of html = size of viewport).
So now body has a fixed height and it can't expand meaning the background doesn't expand as well. Now one might have the idea to give body no size so that it can expand. But .page has 100% too. If a parent (in this case body) has no fixed size 100% has no meaning and will be treated as auto, which means as big as the content. And the content has a height of 300px. So the .page elements wouild no longer have the height of the viewport but 300px.
As for the collapse of the CSS, you should either specify the height specifically height:200px; or add padding to the bottom/top of the page so that the content wraps. You can also use min-height:200px; then add the margin-bottom:20px; to separate the pages. I would approach this at a specific height with the wrapper having the specific background-image and bottom-margin.
In order to center your background-image to the <html> you can specify the position as 50%.
This can be done by doing background:url('yourimage.jpg') repeat 0 50%;This will ensure the background is centered.
This is the page I am working on right now: http://jsfiddle.net/0xsven/hycRx/
I want the page to expand vertically to fill the whole screen so that the footer is always at the very bottom. I am not searching for a sticky footer! I want the page to expand to the bottom like in this picture.
Any idea if this is possible?
Update
I used some confusing words so I am trying to clarify my question:
I want my page to always fill out the viewport vertically, even if there is not enough content. As soon as there is enough content to even extend the viewport the page should be scrollable. In my tests a sticky footer always stays at the bottom of the viewport covering other elements, which I don't want to happen.
One solution I came up with is manipulating/resizing the paddings/margins with jquery so it fits the viewport. But I dislike using javascript for such things.
You can experiment with the position attribute, like this:
#footer{
background-color: #222;
position: relative;
bottom: 0;
}
#footer{
position: fixed;
bottom: 0;
}
The behaviour you're trying to emulate is that of the conventional CSS Sticky Footer.
Here's a simple example:
HTML
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
CSS
html, body {height: 100%;}
#wrap {min-height: 100%; *display:table; *height:100%}
#main {overflow:auto; padding-bottom: 150px;} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
I have a set height footer div that fills the bottom of the screen, 100px wide, with a black background it sits over a body Back ground image. There are a few pages with not a lot of content. The footer rises up the page and because it has a fixed height, under the footer you see the body BG image. How would I go about using CSS to make sure that the whole screen below the raised footer is black, without having to extend the set height of the footer div?
You can give "min-height" to the pages that .So, although content is little, the footer will be same.Since content area has "min-height"
You can have a look at here for "min-height"
And here is sample code;
.content {
min-height: 600px;
}
There are some published solutions to this. The core of them all seems to be applying minimum heights (including some hacks for earlier versions of IE) to a block-level element that wraps all non-footer content and has a padding equal to the footer's height. The footer then has its height and negative top margin set explicitly (to the same value as the wrapper's bottom-padding.
Code example from the CSS Sticky Footer solution.
HTML:
<body>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
I'm trying to implement a sticky footer which is working except that the main wrapping div's 100% height is extending way too tall (#body-wrap) and it's causing a huge gap between the content and the footer. So instead of the footer sitting at the bottom of the screen like it's supposed to, I have to scroll down the page past the huge gap to view it.
I have something like this as my HTML:
<div id="body-wrap">
<div id="content">
[about 100px of content here]
</div><!-- end #content -->
<div class="push"></div>
</div><!-- end #body-wrap -->
<div id="footer-wrap">
<div id="footer-content">
[about 300px of content here]
</div> <!-- end #footer-content -->
</div> <!-- end #footer-wrap -->
And my CSS:
html, body {
height: 100%;
}
#body-wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -300px; /* the bottom margin is the negative value of the footer's height */
}
.footer-main-wrap, .push {
height: 300px; /* .push must be the same height as .footer */
}
Anyone have any idea why the a 100% height would extend further than the content?
When you specify height as a percentage (e.g., height: 100%), that's in relation to the parent container, not the contents of the element. If you're not needing to support IE6, you'll probably find this a lot easier to implement using position: fixed for the footer.
Edit: I just noticed another thing - in your markup you have an element with ID footer-wrap, but in your CSS, you're using the selector .footer-main-wrap. Try changing .footer-main-wrap in your CSS to #footer-wrap.
Adding
height 100% to your html
and
height auto to your body will make it adjust correctly when the page isn't long enough
I've set up my problem here.
I have 2 divs, each outlined with a black border. One is my content div (containing text), with height set to 600px; The other div, containing a banner image, I'd like to use as my page's footer. I am able to do this in absolute positioning by simply marking the div with "bottom: 25px." However, what I'm hoping to do is to make the footer div "stop" when it collides with the content div as you shrink the size of your browser window.
Any ideas? Thanks much in advance!
Here's how I do it. Got the technique from http://ryanfait.com/sticky-footer/. He adds an extra "push" div but I used the wrapper's padding bottom to serve the same function (no need for empty DIVs).
Here's an example (you can view it at http://ve.savantcoding.com/example.html)
<html>
<head>
<title>sample footer</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* bottom margin is negative footer height */
}
#content {
padding-bottom: 200px /* bottom padding is footer height */
}
#footer {
height: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">your content</div>
</div>
<div id="footer">your banner</div>
</body>
</html>