I'm trying to implement a sticky footer such as this but if my content is shorter than the footer still appears partially past the fold. I can see about 25px of it and I have to scroll down to see the rest. Here is the relevant CSS:
* {
box-sizing:border-box;
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -60px;
}
.wrapper:after {
content: "";
display: block;
}
.footer, .wrapper:after {height: 60px;}
I'm using Chrome but the problem also exists in Safari. I've tried it without using pseudo selectors but I have similar issues. All of my content is wrapped in the wrapper div except for the footer.
Vertical margins will cause issues when using sticky footer because of how height is calculated, which can be seen here: http://jsfiddle.net/b9Zy7/
Change margin-top to padding-top on p and all is well.
Related
Was cleaning up some html in the footer of a new site and now the footer background color is not displaying for the full height. It was displaying correctly before the clean up and I have not touched anything in the CSS, wondering if I am just overlooking something small.
Current CSS:
#footer {
width: 100%;
margin: 20px 0;
position: relative;
padding: 20px 0;
background-color: rgba(0, 151, 214, 1);
}
Note: I didn't want to specify a height ie. 600px and then have to readjust a height or min-height for several breakpoints.
Thanks!
The footer element (id=footer) is "collapsing" because all of its children are floated. To work around this problem you could apply the clearfix hack. Either you could add a new class called .clearfix and add that class to the footer element, or you could apply this code to the footer element;
#footer:after {
content: "";
display: table;
clear: both;
}
You can read more about the clearfix / group hack here: https://css-tricks.com/snippets/css/clear-fix/
I'm trying to figure out how to get the footer to stick to the bottom of the page in the css of http://bit.ly/138xOAB
I've tried alot of things which were said in tutorials, such as:
the position absolute,
bottom:0,
and min-height of the container 100%,
height of the body 100%,
But none of those things turned out well.
You can see the HTML and CSS by inspecting the website. I can't get the proper code over here.
Can someone help me, maybe there is something wrong in the HTML?
The problem with you footer's position: absolute; is that it will hide the other elements behind it.
Your footer can be best viewed if you remove position: absolute; so as to show all elements and add margin-top: 20px; for some gap in between the footer and the element before it..
Try it.
EDIT:
If you want the footer to be always float on the screen, use the following CSS (comments inline):
.container {
max-width: 1200px;
margin: auto;
padding: 0px 3%;
margin-bottom: 250px; /* so that all content is visible */
}
.footer {
background: #efefef;
position: fixed; /* so that the footer floats */
overflow: auto;
bottom: 0px; /* float at bottom */
padding-top: 20px;
padding-bottom: 20px;
height: 180px;
width: 100%;
margin-top: 20px;
}
Remove "position: absolute" and "bottom: 0" from the .footer class. I think that fixes your issue. And add a small margin above the footer so there is a small space between the content and the footer.
I am using the sticky footer method for Bootstrap 3.0 as described in their example. I have it working fine and that is not what I am struggling with.
It calls for the wrapper to have the following:
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
Now I am trying to have some 100% height containers inside that and I can't because there is a height of auto on the parent. Is there a way to get around this and keep my sticky footer? I want to put 100% height containers that stretch so I can put backgrounds in them.
Thanks
I'm not quite sure if this solution fits your needs, but it involves absolute positioning a div behind the sidebar and making it stretch the height of #wrap by setting top and bottom to 0. It essentially inherits the height while avoiding explicitly declaring a height property. The only potential problem would be if you have other elements that are above the sidebar (i.e. headers) since the div will also be stretch behind those as well.
http://jsfiddle.net/qaB8D/
#wrap {
position: relative;
}
aside, #words {
/* This is just so the sidebar stays left, and the text stays right */
display: table-cell;
}
aside {
width: 100px;
}
aside:before {
content: '';
position: absolute;
background-color: red;
top:0;
bottom: 0;
width: inherit;
z-index: -10;
}
/* include Sticky Footer code/*
In my HTML page, I have made a container that contains the entire body (header and footer included). But the problem I am facing is that when I set the container to a fixed width, the header and the left side of the footer display properly, but the right side of the footer extends on indefinitely. Here is my CSS:
.container
{
width: 1024px;
}
.footer
{
float: left;
margin: 0px;
width:100%;
background: #0B3B17;
height: 100px;
position: absolute;
bottom: 0;
}
I think it may have something to do with the absolute positioning, but I need my footer to be absolutely positioned since it keeps moving out of place. What would you suggest? I am using Twitter Bootstrap for development by the way. Thanks for your help.
Add position:relative; to .container rule.
.container {
width: 1024px;
position: relative;
}
Because of the footer is relatively body position.. So will be in the body of the same width.
I think sticky-footer will be you a better solution.
I'm using a sticky footer for the first time with a site I putting together, however doesn't seem to be going as planned. There appears to be a large white space, and then a black area (this is the color of my footer) please see link http://c-hall.the-word.com/assignment/whatwedo.php I need the footer to butt up to the bottom of the last bit of content, in this case the text witch is yet to be styled. Please see code below - thanks for your help - Charley
CSS
/* sticky footer */
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -335px;
}
.footer, .push {
height: 335px;
background-color: #000;
}
#innerfooter {
width: 847px;
height: 335px;
position: relative;
background-image: url(../images/black_bar.png);
background-repeat: no-repeat;
text-align: left;
margin: 0 auto;
}
/* end sticky footer */
Try this out for size, this will stay at the bottom of the page if the content isn't long enough and prop up the bottom if the content reaches it http://ryanfait.com/sticky-footer/
Look at your html structure (Especially at the .wrapper div.). The placement of the div is wrong.
And read this link: http://www.cssstickyfooter.com/
You are always going to have this gap because the position of your footer is static so it's fixed to the bottom of your browser. This white gap is your body background width unused space. So fill it or eliminate it by less width of your page or any other approach you find appropriate !
The point is I'm not giving you a precise solution but it's more important to understand what you're doing not just applying tutorials.