I'm try to get my footer to stick to the bottom of the page on this website: https://account.radonsystems.net.
Unfortunately, it seems not to be working, though it is working everywhere else I've used it.
This is the CSS for the sticky:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 57px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -57px; /* negative value of footer height */
height: 35px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
.footer a,.footer a:hover{text-decoration:underline;color:#FFF;}
Does anyone have any idea of why it's not sticking to the bottom?
I can tell you a better option to fix it at the bottom
Just apply style as
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:57px;
}
Thanks and regards,
Wazzy
If it works everywhere else, then something must be wrong with that html page, not the CSS, maybe post the HTML page code, or compare it to those that actually work correctly.
Look over the sticky footer tutorial at this link to see how the sticky footer concept works. This should help you be able to compare your html structure and css to find the problem. If you can give us your html we can look at it with you.
Related
So I'm trying to design a webpage and was trying to get the footer to stick to the bottom of the page at all times. I did manage to do that with trouble but I figured out where my error was. What I want to know is what is the difference between doing this,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
and doing this,
html,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Why does putting the html part at the top make the footer part of the code work? It doesn't seem to effect any of the other code, just the part that makes the footer stay at the bottom. This isn't my code just the code I got from here I have the same issue in my code though and was just wondering what the deal was cause I can't find anything on this.
http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/
Sorry if I wrote this wrong first time posting.
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.
the absolute position must be relative to another element and in your case the footer is relative to the body. By default the height of body and html isn't 100% to the screen, so if you make your footer absolute to the bottom of body it will be at the bottom of body not the screen so to solve this you made the body height is 100% of the html which must be also 100% to the screen.
you can also use the fixed position instead of absolute, position:fixed will be relative to the screen not to any other element so you footer will be in the bottom even the body and html height isn't 100%
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
So I was having a look at my website on my mobile device and there are a few errors I haven't been able to fix. The first is the footer of my site.
http://www.webbmaster.com.au/web-programs/questdesign/
As you can see my footer looks distorted. Any ideas on how to fix it for mobile. This is my css code for the footer.
.footer {
background-color: #F6861F;
color: #fff;
padding: 20px 0;
text-align: center;
overflow: hidden;
width: 100%;
}
Also the other problem is the large amount of white space down the bottom of the page. How would I go about removing that?
Many thanks to whoever can help me sort this problem out.
It's because you're setting width by pixels. You cannot expect your website to be responsive if you specify height,width by pixels.
.body .container{
width:80%;
}
.navigation .nav-pills{
width:80%;
height:20%;
}
That should make your website look more acceptable in mobile view.
EDIT:
Add this to your css file.
#media screen and (max-width:767px){
.body .container{ width:80%; height:100%;}
.navigation .nav-pills{height:55px;width:100%;}
.nav > li{float:left;}
.nav-pills > li a{margin: 10px 10px;}
.sliderr{height:340px;}
.footer{margin-top:10%;}
}
Try it and let me know if you are happy with it. Also I don't think float left is needed. It's just a habit of mine :X
this worked out for me, had to go over my entire css a bit and edit, but seemed to work very nicely :)
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:1em;
background:#5ee;
}
#content {
padding:1em;
padding-bottom:5em; /* Height of the footer element */
}
#footer {
width:100%;
height:5em;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
This works for mobile and webpage, to keep the footer down there.
Doesn't have to be in px, I use em's :) Changed it to em's, this I find better for wwebpage setup :)
Tou can then have other items in absolute position to, just have to be relative to wour Wrapper, the part wich is your entire webpage :)
The body in min-height 100% wont do it, as the body adjust's to the content in the page, and therefore, if less text, it will not stretch out!
Hope ithis helps you as much as it did me :)
On my site here, the footer is white at the end when the padding-bottom isn't enough and wondered if someone could help diagnose.
Here's the footer CSS:
#footer {
color:#E0E0E0;
max-width:1280px;
margin:0 auto;
padding:1.45em 2% 0.4em;
}
And I'm wondering if the right-nav equal column CSS is affecting it:
.right-nav {
float: right;
width: 29.4%;
border-left: 1px solid #Dddddd;
padding-top:2em;
padding-bottom:10040px;
margin-bottom:-10000px;
}
Any ideas would be great.
*Update: this page here has a huge gap too, which is why I'm wondering if the right-nav has anything to do with it.
Sounds like you want to use a sticky footer.
http://ryanfait.com/sticky-footer/
This is the best tutorial I've found on the web. You may have to do some tweaking to your site's structure, though.
What this does is essentially forces the footer to always be at the bottom of the page, no matter what the size of the content. If the content is large enough, it sits at the bottom of the page as it should.
if i understood you right
then you need to add overflow to your footer
#footer
{
overflow:hidden;
}
Using this should work. Here is a jsFiddle example of it in action.
#footer {
bottom:0px;
position:absolute;
}
Ok, i've tried LOTS of solutions offered in StackOverflow about this issue, but none of them have worked. I guess this is a tricky thing and needs a tricky solution.
From what I've seen, each problem is different with this 'occupying' the body thing, so I guess I'm here with a different one.
I really need help here, guys.
Here's my problem: http://jsfiddle.net/Ff49Z/5/
And heres what I want: When the "wrapper" div does not fulfill the body, I want the div to expand to the bottom of it anyway. So, in the fiddle, what I'm trying to achieve is not a gray spot on my layout. As you can see, wrappers are 100% height (that is one common solution offered in SO for this problem) and that does not help.
It is this div that does not expand to fit the wrapper:
div#middle {
padding:10px;
margin:0 auto;
height: 100%;
}
BTW, when overscrolling, footer sticks and wrapper scrolls. That is the desired behaviour, and it works flawlessly.
I simply added:
div#middlewrap {
width:100%;
position:absolute;
margin-top:60px;
}
and works as you asked. EDIT: THIS IS WRONG - correct answer below
I was about to give up when I decided to rewrite the css from scratch, and it came out simpler than I expected. I simplified your CSS to the bones and added some cool overflow-y:auto; to the middle wrapper plus some sweet position:fixed; to the header and the footer. Then I adjusted the padding to the #middle content div and added a height:100%; to the body and html(so that every child of body can be successfully set to height:100%;) and that's what came out:
body, html {
margin:0;
height:100%;
}
div#headerwrap, div#footerwrap {
position: fixed;
left: 0;
right: 0;
}
div#headerwrap {
top: 0;
height:64px;
background-color: red;
}
div#middlewrap {
height:100%;
overflow-y:auto;
background-color: blue;
}
div#middle {
padding-top:70px;
padding-bottom:35px;
}
div#footerwrap {
bottom: 0;
height:32px;
background-color: green;
}
That's all the CSS you need. Pretty cool uh?
HERE IS THE FIDDLE
Note: I respected your syntax, which is also correct, but it's not necessary to write DIV before every #ID in your css. Deleting those selectors will dramatically decrease your css file weight in bigger projects.
Cheers.
Make all parent elements as height:100%:
body, html, body>div#middlewrap {
height: 100%;
}
div#middle {
min-height:100%;
}
Impossible solely with CSS. Need javascript involved. Take the client height - (header + footer) = min height for the content
Using % height doesn't work because the parent doesn't have a height defined.
I wanted to use "full width" stripe on my footer, but aparently it doesen't want to work. here is the example of what I have right now.:
I want the footer to do a repeat-x over its div. So, going off until the end of the screen (like its done on the upper part). This might be something extremely simple, but I'm fairly inexperienced with CSS styles, so please lend me a hand.
[EDIT] The footer div is inside a wrapper. The edges of the div are aligned with the wrapper width. My question is if its possible for it to "overlap" the limitations, until the end of the screen.
I would also like to give it a specific position, not variable with the end of the article. I understand that I need to use it as position:absolute, but it always apears right after the header, even if I give it a Y position. There is probably something simple I'm forgetting.
Here is the existent code I have in my Footer class:
#footer {
background:url(wp-content/uploads/2012/06/whitestripe.png) repeat-x;
position:relative;
width:100%;
clear:both;
text-align:center;
line-height:16px;
font-size:11px;
}
#footer a {
padding:2px 3px;
color:#004a6a;
text-decoration:none;
}
#footer a:hover {
color:#105a7a;
}
Thank you.
Marco Roberto.
Move the footer element outside the main wrapper so that it isn't constrained by it. Inside the body will do fine for example.
Then change the css:
#footer {
position: absolute; // or fixed if you want it to scroll along
left: 0;
right: 0; // or width: 100%
bottom: 10px; // change to the value you want
}
Hey now define in your css body and html width
as like this
html, body
{
width:100%;
}
background-image:url('paper.gif');
background-repeat:repeat-X;
Try this
http://www.w3schools.com/cssref/css3_pr_background-size.asp
This will help you to study...