I have a site I am working on. I want to get the footer to stick to the bottom of the page.
So I followed a simple guide which basically did this:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
padding-bottom: $footer-height + $footer-margin-top;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: $footer-height;
}
This seemed to work at the start. Then I got to a stage where the content was more than the view port height and that is when things stopped working.
If you look at this you can see that the footer is at the bottom of the page.
But if you look at this, the footer is at the bottom of the viewport.
I know this is a simple fix, but I can't figure it out.
Can someone give me a hand please.
You want your footer to stick at the bottom of the page unless the content on body is large enough that it appears after you scroll?
If so, you should set height: auto; on your body tag, so if it's more than 100% set on your min-height rule, it's taking into consideration and pushes the footer towards the bottom.
Let me know if that's your intended behaviour.
Change
position:absolute for .footer to position: fixed
.footer {
position: static;
right: 0;
bottom: 0;
left: 0;
height: $footer-height;
}
Related
Within my body tag I have a header and div#content element. My aim was to create a fixed header and then push the content of the content element out from under it using a margin-top attribute. However when I did this the header also moved down as though it were joined to the content. I fixed this by adding a position: absolute to the content. The trouble is I cant explain to myself why it worked. It just did. I am using Firefox on Ubuntu.
This is the header css:
header {
position: fixed;
top: 0px,
left: 0px;
margin: 0px;
background-color: #3F51B5;
font-family: sans-serif;
color: #FFFFFF;
width: 100%;
z-index: 1;
}
This is the content css:
#content {
position: absolute;
margin-top: 100px;
}
Here is the codepen.
Please educate me someone :)
Several observations:
position: absolute; didn't really fix it. Check out this codepen for a demonstration. Notice the fair amount of content I added after your divs and how they don't display correctly? This is because:
You had a typo on your first css element. Here's a codepen demonstrating a fix: http://codepen.io/anon/pen/YwvBJy You wrote , instead of ;. You didn't close the top: ; attribute so your browser tried to fix it by using the #content margin-top.
Bad syntax-- used a , instead of ; on line 3
header {
position: fixed;
top: 0px,
left: 0px;
so the attributes top and left are wrecked.
You used a comma instead of a semicolon here
head { top 0px }
Please replace the comma with smemicolon than you dont need position: absolute .
I have an issue where my footer only is stuck to the bottom of the page on the index, applying any sort of "sticky footer" CSS fixes the footer for every other page, but breaks the footer for index. As in, it floats up.
Here is the general CSS I've tried:
position: absolute;
bottom: 0;
width: 100%;
Which again, works fine on most other pages, however not on the index.
You can see my live index here: http://goo.gl/XUUCjW
And an example of a non sticky footer on one of my pages here: http://goo.gl/uhd1h4
The way I get around this is to do the following:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
The reason for the margin-bottom on the body is that when you push the footer to the bottom it will overlap the content of anything above it. I found that 60px worked well for me but you may have a deeper or smaller footer so adjust accordingly.
http://swimclub-theme.myshopify.com/search?q=asfsf
I'm using the following theme. As you can see when you search for something that isn't available the page isn't 100% high the 'footer' part hangs out around the center of the page. Is there a way to make it so the container is always 100% high? I tried adding min-height and such but it doesn't seem to want to budge.
Does anyone have any idea why it's stuck like that?
Thanks!
Don't mess with the content height.
What you are looking for is called "sticky footer". The following is best practice CSS-only solution :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 260px;
width: 100%;
}
Source: http://mystrd.at/modern-clean-css-sticky-footer/
You could make the html and body have a min height of 100%. If the footer is put to bottom it will then be able to go there.
html, body {
min-height:100%;
}
As you said this wont work. The only thing you can do in css is to set
position: absolute; http://jsfiddle.net/52vpw2wg/1/
But you can do it with JavaScript or jQuery. Like this http://jsfiddle.net/52vpw2wg/2/
I want to make a sticky footer like the one I made in this example.
http://codepen.io/Kenny94/pen/JvtFs
html, body {
height: 100%;
width:100%;
padding: 0;
margin: 0;
position: relative;
}
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
The problem is it doesn't work right in my current project. It sets the footer behind the body but if I start to scroll it appears. If I watch the size of the body in chrome it has a height off 970px but the whole site is much bigger because of the post. It seems to me that the body didn't expand like the Blog Post Wrapper. I set the BG-Color to grey in the body and that fills the whole page. I have no clue why it dosen't work with height 100%. I could set the height to 4000px to fit with the content and everything else but thats not a real solution.
I'm not exactly sure what you are trying to achieve.
-If you are wondering why the footer is placed behind the body, it's because you set
z-index to -1.
So the fix would be this: http://jsfiddle.net/bmpy6/
-If you don't want to have it visible when scrolling (so to say, keep it fixed at the bottom at all times), this should be what you want: http://jsfiddle.net/bmpy6/1/
For that, you omit the position: fixed;.
You don't need to set your height on the html tag or the body tag. It will flow with the content. You're setting the min-height of the main div to 100%. This will take up the rest of the remaining space when a view is loaded pushing the footer off the screen. You can either change the height of the main div or make the footer position fixed to the bottom of the screen if you want it to be sticky as in stick to the bottom of the screen.
Change :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
To :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: 1;
}
Just changing the z-index will bring your footer to the front. Remember that the Z-index basically gives your id's and classes precedence over one another in terms of their visibility.
You do not need to set the height at all. Try this:
div {
font-size: 30px;
margin-bottom:60px;
background: red;
}
Instead of:
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
You see, when you tell the page to have a height of 100%, you are telling it fill 100% of the screens height. When you remove the height,(In this case it was a min-height so it will expand if needed) the <div> expands to the height needed to hold the content.
See this JSFiddle for a working example
Hope this helps!
OK, So i've used to common "push" method with the footer to ensure that it stays to the bottom of the page... However, there is now an unnecessary gap between the container and the footer which means that there is always a scroll down, even if there is no content to push it down. I would hope that if there was no content, the footer would just stick nicely to the bottom of the website.
Has anyone else found this and been able to tackle it?
Thanks in advance :)
This can be done with just a few lines of CSS. Assuming that you are using the <footer> element, apply the following styling properties:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
And that's it!
I use
#footer {
position: relative;
left: 0px;
bottom: 0px;
height: 150px; // whatever height you want
width: 100%;
}
works for me