I want my footer to always be stick to the bottom of the screen, except in the case when there is enough page content to fill the screen In this case, the content should take priority and push the footer off the bottom (so that you have to scroll to see it).
Here is an example of desired behavior:
http://ryanfait.com/sticky-footer/
To be clear, I know about fixed toolbars in JQM, they are not what I want because they take up valuable screen space when there is a lot of content.
The closest I have come is the following CSS rule:
[data-role=footer] {
bottom: 0;
position: absolute;
width: 100%;
}
If you know a better way, please post an answer!
May be you should try Fixed Full screen or non-full screen but fixed Header and footer in JqMobile...
In jqMobile, this feature is added and is the most vibrant feature in it for webapp developers..
Take a look at it..
Fixed toolbars : JqMobile
Also you can apply custom css for the space issue by adding classes...
My best solution:
$(document).ready(function(){
$("html, body, .ui-page").height($(window).height());
}
Hope this helps.
Related
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
I am trying to build a web page which should appear same in both wide screen as well as in small screen monitors. I was trying to keep it fluid but in the mean time strange blank space appeared at the right side of the web page.
Strange thing is the blank space is outside the viewport but it makes horizontal screen bar to appear and once scrolled to Right most side, one can see the white space.
Code can be seen here http://jsfiddle.net/FW98q/
MY gut feeling is the problem is at:
#Navigation_Container {
background: #3399cc;
height: 50px;
//width: 960px;
//margin: 0 auto;
}
Help is much appreciated.
Also any tips on how to style the web page so that it remains consistent over screens. Comments on the design are also welcome..:)
I found the issue....Its in the class '.notice' that is in the footer...if you remove
position:absolute;
It works just fine. :) Check it out! Fiddle
I used the element inspector in firefox at saw that it was the only element that was extending beyond the page.
Also, if you need it positioned absolute on the bottom as you had it, make sure also put the left postion as well like this
position: absolute;
bottom: 0px;
left:0px;
Here is an example with the left:0px added
FIDDLE
#page_container, #Header {
width: 960px;
}
Made sure these two element are the same width as the others if you want them to be the same width.
// doesn't work in CSS and you aren't closing one of your divs. I think it's the content one. Why do you have 3 different footer divs? Your mark up is way too complicated you could combine all three of those and get the same effect.
Taking that just out of the navigation container fixes the white space, but you've done it at least one other place.
add to your css
body{margin:0;}
This is the website I'm working on:
http://uber.imu.uiowa.edu/isa/
The footer was floating to the top of the page since there wasn't enough content, so I used this trick to push the footer to the bottom:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Problem is, there is too much space and it added a scrollbar. How do I fix it so the footer is on the bottom of the page, but doesn't add that scrollbar?
The current method is great, i use it all the time. You just forgot to set the negative bottom margin of the wrapper to the same height as footer and footer-push. Update your .wrapper css to this margin: 0 auto -300px; Did the trick for me in the chrome inspector.
Well, keeping your current method, I'd just decrease the height of .push:
.push{
height:50px;
}
But that's not the best way to do this.
http://jsfiddle.net/VFqTv/
In this example, you give the body tag a background color (or image) that is the same as the footer, then the content fills up as much space as it needs. The footer lies right below it, and the remaining part below it that flils the rest of the screen acts as a filler of sorts.
The Contents in you webpage are too much to fit on the single screen. So if you want to remove the scroll bar, either you have to reduce the font and the contents size or you have to remove some contents.
But if you want to reduce some vertical space in webpage remove height:200px; from .push {} and add margin-top:100px;
The image of footer is too big, i think you have to resize your image in photoshop then use it in the footer, or put the image over your footer.
I have no containers, no wrappers.
I simply have a layout like so...
<body>
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div class="clear"></div>
<div id="footer">
</div>
What I am wanting to do is to make sure the footer always stays at the bottom of the screen whether I have content that goes pretty far down and or even not enough content to go all the way to the bottom of the screen.
As of right now, I can get either two of the ways listed above to work, but I want both to work.
Here is the CSS I have set-up for this.
html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
I am aware that if I apply a min-height: 100%; to the HTML Element within the CSS Document that will go as the content goes, but if I do not have any content, per se, it will not stick at the bottom of the screen. Resolution regardless.
I have ran into this problem multiple times, and never am quite sure how to figure it out. So, some help would be much appreciated, along with some explanation.
Thank you so much everyone for your help!
use this mate, it's a really well explained and easy to follow tutorial:
http://code.google.com/p/cleanstickyfooter/
Best sticky footer ever works really really well
Quote from the site (and I agree completly):
The Difference
Google "sticky footer", I have listed below why this technique works
better than the top results from this search.
http://ryanfait.com/sticky-footer/ - This technique is similar, but
cleanStickyFooter takes it much further. The technique located here
doesn't play nicely when you want to make your footer have a width of
100%.
http://www.cssstickyfooter.com/ - This technique is one out of many I
am referring to when I say its invasive with CSS clearing hacks.
Do you want the footer to be attached to the bottom of the content whatever the amount of content, or at the bottom of the screen whatever the amount of content?
If the first, don't bother positioning it - let it go with the page flow after the content.
If the second, use position: fixed
You may need to be a little more clear. What scrolls? Header? Left? Right? Footer? Are Left and Right part of your overall content? Why is your Body positioned relative? Why do you have a "height: 100%;" for html?
You can take a look at the layout specified in this Artice by RyanFait
Cross browser, and always works :)
I know there are several other questions about the sticky footer, but none have seemed to help me get to a solution for my problem. Here is the template in question:
http://blog.campquiet.com/stack/
Basically I would like the background with the transparent side bars to extend to the bottom of the browser window. The footer (copyright info) should always be at the bottom of the screen as well, even if there isn't enough content to push it that far).
Any suggestions??
Update
Maybe I wasn't as clear as I needed to be. Basically I'm trying to accomplish what is seen here: hxxp://www.cssstickyfooter.com/
I haven't been able to get that working in my template.
You need to set the body and outer container to 100% height. This answer may help you: CSS 100% height with padding/margin
I'm not really sure I understand what you're asking, but to keep the footer always at the bottom, perhaps try something like this
#footer{
position: fixed;
bottom: 0; /* Keeps the footer glued to the bottom of the page */
z-index: 9999; /* Keeps the footer on top of all other elements */
}
For the background, try to apply the CSS to the body tag?
body{
background: url(assets/images/bg_clouds.jpg) fixed 0 0;
}
You can apply extra settings for the background (like position & repeat) to get it to look like it is currently. Anyway, if this doesn't answer your question, please help me out with a more detailed explanation of your question.
Hope that helps.
UPDATE
I played around with Firebug to edit your CSS. I think if you get rid of the background css under html, body {} and add this to your body {}
body {
background: url("assets/images/bg_clouds.jpg") repeat-x fixed 0 0 #F0F4F7;
}
... it will keep the background static even if you scroll. It will always be there. Make sure you have fixed instead of scroll