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
Related
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;
}
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.
As mentioned in the title, here are the requirements:
a footer that must always be at the bottom of the viewport (no pushdown)
css only
height based on the content of the footer (variable)
somehow prevent overlap of the main content element - when scrolled down
no tables
header
content
footer
if you remove any of the requirements, I know how to do it, but not with all requirement intact.
does anyone know a solution?
To put the footer on the bottom you can use a variation of the following:
.some-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%
}
The problem with this is that the main content will be behind the footer and you won't be able to scroll it up. And you can't just put a padding-bottom on the content because you don't know the footer's height.
I would recommend putting a duplicate of the footer after the content, but this one with position: relative, and with opacity: 0. This way you can always scroll until all the content is visible, independently of the footer's height.
This should work as you want! :) It will always be at the bottom of the page.
This will always be at the bottom of the viewport, NO MATTER WHAT! :D
#footer{
height: auto;
min-height: 100px;
width: 100%;
background-color: blue;
bottom: 0px;
position: fixed;
display: block;
z-index: 100000;
}
<div id="footer">
</div>
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.