I've got 60 pages all with the same footer, included with php. The amount of content varies from 300px in height to 2000+. I don't think this is possible, but it would be great if I could get the footer to sit at the bottom of the browser window, if the page is shorter than the window, and behave normally (pushed to the bottom) otherwise, with just CSS. Thanks.
I know this post is pretty old, but I found a great resource for this exact thing.
http://ryanfait.com/sticky-footer/
here is just the css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Good luck.
This is waaaay too late and the answer is somewhat similar to the one by Barry P.
For your wrapper css class add the following,
min-height: calc(100vh - 155px);
Note: This does not work in IE8 or lower.
here is an article that is targeting even IE7
footer stays at the bottom when there is a little content
and drags down when there is alot of content
http://snipplr.com/view/15334/
I would try give your content a min-height of say 500px...
#content {
min-height: 500px;
}
That way, even if you only had 300px of content the 500px (or longer if necessary) would make sure that the footer is pushed far enough down to be at the very bottom.
Try adding this to your CSS
#footer {position: fixed; bottom: 0;}
Related
Currently I'm working on a website for myself. I decided to go for a header content footer design where the footer shall be stuck to the bottom all the time. Hence I set up a wrapper with position: relative, containing the header (#top), content (#middle), and footer (#bottom). Bottom got position: absolute with top: 0.
I've also set height: 100% for html and body and a appropriate padding-bottom for #middle to ensure that my footer won't overlap #middle.
Please find a simplified sample version here: http://www.webdevout.net/test?0w
Here is the CSS in question:
* {
padding: 0;
margin: 0;
}
html, body {height: 100%}
#wrapper {
position: relative;
background-color: #ccc;
min-height: 100%;
}
#middle {
background-color: #900;
padding-bottom: 200px;
}
#top, #bottom {
width: 100%;
height: 200px;
background-color: #bb5;
}
#bottom {position: absolute; bottom: 0;}
Now here's my problem: my understanding of the box-model is, that one should be able to achieve the same (keeping the space for the footer) with margin-bottom instead of padding-bottom for #middle, but margin-bottom isn't applied to it. I've read that min-height doesn't consider padding, border or margin, but the padding is considered here while border and margin aren't.
FF and Chrome show different behaviors when margin-bottom is used instead of padding-bottom for #middle: while Chrome just ignores the margin, FF applies it below #wrapper. My general idea would have been that my container should grow to the total size of its content with min-height, including height + padding + border + margin of #middle, but obviously it just grows to overall size of #top + height of #middle + padding of #middle.
I wonder what is the correct behavior and why padding and margin aren't interchangeable to keep the space for the footer.
While an explanation would be much appreciated, I'd be also thankful for a link to a source which could help me. I'm sorry if this duplicates another post, but I didn't find something (neither here nor via Google) fitting my special problem.
Thank you!
i had faced same problem like u are facing.
You have to use this piece of code.
#middle {
display: table;
margin: 2% auto;
width: 100%;
}
use of display : table works for me to set margin from top and bottom.
I have an outer div, called #wrap, and two inner divs: #container and #footer. Content is inside #container, and is dynamic. There may be a little, there may be a lot.
When content is minimal, the footer div may appear half-way up the page. However, this changes depending on the monitor/resolution. What is 50% from bottom on a large monitor may only be 10% from bottom on a small/cluttered viewport.
If I use this css method:
body,html { height: 100%; }
#wrap { position:relative; min-height:100%; }
#container{ margin:0px 0px 50px 0px; }
#footer { position:absolute; bottom:0px; }
then the page will always extend to use 100% of the viewport and the footer will be at bottom of the viewport - exactly as required.
However, if the content increases (or if a small viewport), the footer may overwrite any content extending into its 130px height -- the footer will not bump down.
Is there a way to remedy this?
Note: I don't wish to use percentages for the footer height as it is fixed at 130px and cannot squish.
Here is a fiddle I've been using to experiment
This is the best example of sticky footer I've seen: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
UPDATE (April 2017): As the above link has become inoperable (and much time has passed since the original post) I'd like to offer the following solution to this problem:
Permanently fixed:
#container {
padding-bottom: 130px; // ...or more
}
#footer {
bottom: 0;
height: 130px;
position: fixed;
width: 100%;
}
For a dynamically fixed element, check out this jQuery plugin: https://libraries.io/bower/jquery-sticky-header-footer
I am looking to implement the opposite behaviour to the following question: CSS Push Div to bottom of page. I.e., when content overflows to the scrollbars, I would like the footer to be at the bottom of the page, like Stack Overflow.
I have a div with id="footer" and the following CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
This moves the div to the bottom of the viewport - but the element stays there even when you scroll the page down, so it is no longer at the bottom.
How can I make sure the div stays at the bottom of the page's contents even when the content overflows? I'm not looking for fixed positioning, only for the element to be at the bottom of all content.
Image:
This is precisely what position: fixed was designed for:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
Here's the fiddle: http://jsfiddle.net/uw8f9/
Unfortunately you can't do this with out adding a little extra HTML and having one piece of CSS rely on another.
HTML
First you need to wrap your header,footer and #body into a #holder div:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
Then set height: 100% to html and body (actual body, not your #body div) to ensure you can set minimum height as a percentage on child elements.
Now set min-height: 100% on the #holder div so it fills the content of the screen and use position: absolute to sit the footer at the bottom of the #holder div.
Unfortunately, you have to apply padding-bottom to the #body div that is the same height as the footer to ensure that the footer does not sit above any content:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
Working example, short body: http://jsfiddle.net/ELUGc/
Working example, long body: http://jsfiddle.net/ELUGc/1/
Just worked out for another solution as above example have bug( somewhere error ) for me. Variation from the selected answer.
html,body {
height: 100%
}
#nonFooter {
min-height: 100%;
position:relative;
/* Firefox */
min-height: -moz-calc(100% - 30px);
/* WebKit */
min-height: -webkit-calc(100% - 30px);
/* Opera */
min-height: -o-calc(100% - 30px);
/* Standard */
min-height: calc(100% - 30px);
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
}
for html layout
<body>
<div id="nonFooter">header,middle,left,right,etc</div>
<div id="footer"></div>
</body>
Well this way don't support old browser however its acceptable for old browser to scrolldown 30px to view the footer
plunker
I realise it says not to use this for 'responding to other answers' but unfortunately I don't have enough rep to add a comment onto the appropriate answer (!) but ...
If you are having problems in asp.net with the answer from 'My Head Hurts' - you need to add 'height : 100%' to the main generated FORM tag as well as HTML and BODY tags in order for this to work.
You didn't close your ; after position: absolute.
Otherwise your above code would have worked perfectly!
#footer {
position:absolute;
bottom:30px;
width:100%;
}
I would comment if i could , but i have no permissions yet, so i will post a hint as an answer, for unexpected behavior on some android devices:
Position: Fixed only works in Android 2.1 thru 2.3 by using the following meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no">.
see http://caniuse.com/#search=position
This is an intuitive solution using the viewport command that just sets the minimum height to the viewport height minus the footer height.
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
I've solved a similar issue by putting all of my main content within an extra div tag (id="outer"). I've then moved the div tag with id="footer" outside of this last "outer" div tag.
I've used CSS to specify the height of "outer" and specified the width and height of "footer". I've also used CSS to specify the margin-left and margin-right of "footer" as auto. The result is that the footer sits firmly at the bottom of my page and scrolls with the page too (although, it's still appears inside the "outer" div, but happily outside of the main "content" div. which seems strange, but it's where I want it).
I just want to add - most of the other answers worked fine for me; however, it took a long time to get them working!
This is because setting height: 100% only picks up parent div's height!
So if your entire html (inside of the body) looks like the following:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
Then the following will be fine:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
...as "holder" will pick up it's height directly from "body".
Kudos to My Head Hurts, whose answer was the one I ended up getting to work!
However. If your html is more nested (because it's only an element of the full page, or it's within a certain column, etc) then you need to make sure every containing element also has height: 100% set on the div. Otherwise, the information on height will be lost between "body" and "holder".
E.g. the following, where I've added the "full height" class to every div to make sure the height gets all the way down to our header/body/footer elements:
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
And remember to set height on full-height class in the css:
#full-height{
height: 100%;
}
That fixed my issues!
if you have a fixed height footer (for example 712px) you can do this with js like so:
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
I hit my footer with a margin-top: auto and it did the trick! Im commenting this here just in case it could help any future visitors.
I have a sticky footer which works, but I'm using a tiled background image and an inner #content div. The problem I have is that the #content won't expand to fill the height of the container. I've got a demo at http://jsfiddle.net/mpRUT/1/, where I've changed the colours to illustrate. The only thing keeping #content from collapsing into oblivion when the page is empty is the min-height set on it.
Can I get it to expand to fill the container, or do I just have to set a larger min-height and lose some browsers?
The effect can be seen at http://myfitzeek.lime49.com/
IMO: Will not work 100% without min-height. (see comments)
My old answer:
Edited sample (as fork):
http://jsfiddle.net/4EtKh/1/
#wrapper: {
/*min-height:100%;*/ /* remove! */
position:relative;
height:100%; /* new! */
overflow: hidden; /* new! */
}
#content {
text-align: left;
line-height: 140%;
background: #fff;
font-size: 1.2em;
/*min-height: 80px;*/ /* remove! */
height: 100%; /* new! */
}
Chances are good that you're going to need to set min-height: 100%; and subtract the footer height using negative margin.
#wrapper { margin-bottom: -60px; }
#footer { height: 60px; }
What are your target browsers? You express some concerns about min-height - why not design the footer to look acceptable if collapsed, so that it degrades nicely in an older browser? If you're using a sidebar in your finished design, you can use .clearfix techniques to force the footer to the bottom, which means it won't necessarily be noticeable.
Aside from doing position:fixed; on the footer and using a background image on your #wrapper to give the impression of a full-height content pane, I don't know of a way to make this work without using min-height on #content (like this).
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do you get the footer to stay at the bottom of a Web page?
The 2nd background image on this page isn't properly positioned... I'm struggling to come up with a fix... I need the footer to be at the bottom of the page, always. min-height doesn't work because I need it to always remain at the bottom regardless of their resolution.
Is there a CSS fix for this?
-URL REMOVED-
Sounds like you are looking for a sticky footer.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
You must set html and body to have height:100%;
then to overcome another issue with body only filling the viewport, you need to put a wrapper around all your content, set its min-height to 100% and put the background images to that.
Demo code : http://jsfiddle.net/fNwNn/3/
Live view : http://jsfiddle.net/fNwNn/3/show
I think what you want is position: fixed
Try this:
#footer
{
position: fixed;
bottom: 0px;
}
This will 'stick' the footer to the bottom of the window.
James
See if this is what you want:
http://www.designersandbox.com/code/always-bottom-footer-with-css-only-tutorials/
and a live example:
http://demo.designersandbox.com/always_bottom_footer/index.html
If you actually want the footer to be able to cover the page contents, then you should remove this line
#vc-body{padding-bottom:80px;}
from the given example.