I can't seem to get my sticky footer working. It's my understanding after some research that the parent element of the footer needs to be set to position: relative. Then the footer should be set to position: absolute with bottom: 0. I've done that and it looks fine fullscreen. But when the browser is resized to be smaller, the footer sits in the middle of the page. Any advice? I've been searching for about an hour with no luck. Thanks!
Edit: To clarify, I'd like for the footer to only be visible once you scroll to the bottom of the page or if the whole page is in view. Not persistent on the page at all times (position: fixed.)
(Please see the codepen link below)
Codepen Link
You need to set a min-height: 100%; to the overarching div/body. You will also need to add padding to the div closing just before the footer ie .content-area so that the footer doesn't cover up your content when the screen height is smaller.
https://codepen.io/anon/pen/mqaVxM
Related
I noticed a behavior that drives me crazy.
I have two divs, that have both similar css:
.one, .two {
position: fixed;
bottom: 6%
}
One div is for navigation, and other is for content, that has max 300px height. The problem is, that if the user resizes the browser window to really small one, the scrollbar is not shown.
I tried to change position to absolute, but then the ajaxify plugin breaks the position if new page is loaded. I couldn't find other ideas, how to position those divs at fixed position at bottom.
p.s. I pasted a sample test on http://pastebin.com/Bp1490dj
the background-green div is at the bottom with position:absolute;
from what I know a position:fixed; and or position:absolute; will never make a scroll. (please correct me if I'm wrong) so a way to go arround this is to set a min-height to body
body {
min-height:200px;
}
have a look at the fiddle http://jsfiddle.net/u2ZWa/
also, there is a fix with a scroll now. But you have to know the fixed elements will never be scrollable because they're fixed
Scrollbars are not compatible with a fixed positioning.
I am creating a site that has three major components - the navigation bar on the left, the central content (which is broken into a Title + Data), and a footer. The footer is fixed to the bottom of the page. I have JSFiddle example here: http://jsfiddle.net/6Ur89/1/
The issue I am running into is that, I want to the #data div to scroll vertically when it is too big for the div. The problem that I am seeing is that, when this happens, the div just gets pushed underneath the footer (instead of stopping at the footer) until infinity and scrolling never happens.
Within my CSS, I do have this:
html, body {
overflow: hidden;
}
which I put in to prevent horizontal and vertical scroll bars appearing (presumably due to the footer). However, when I remove this style, the entire content div scrolls which is almost what I want (I would prefer that the title doesn't scroll...but that isn't the end of the world).
Can anybody provide any suggestions where I am going wrong? Again - want #data div to scroll and to stop at the footer. I want a fixed footer at the bottom of the site and I don't want the footer to create the scroll bars. Please let me know if you need clarifications.
Update: Yay for Stackoverflow - after typing up this question, one answer popped up immediately. I put a clearfix on the wrapper, so scrollbars don't appear due to the fixed footer. Updated my jsfiddle to reflect. So, essentially, I'm looking to understand how to just have the #data div scroll.
http://jsfiddle.net/Xsu3Q/
added a padder inside the content div:
<div id="content">
<div class='padder'>
<div id="title">title</div>
<div id="data">Lots of data...
.padder {padding-top: 100px;}
moved the content 100px up outside the frame:
#content {
position: relative;
top: -100px;
margin-left: 350px;
height: 100%;}
This way you can use the height:100% property to match the height of the body
AND subtract the 100px for your footer.
for a cleaner example look at a similar answer
I am working on an MVC site and I am having trouble getting the footer to stay at the bottom of the page in IE10. For some reason it will appear at the bottom of the window originally when the page is loaded but then it will stay in the same position even when you scroll down and hence the footer is no longer at the bottom of the page.
What is strange is that when you resize the window the footer is then fixed at the bottom of the page.When you return the page to full size the footer is still fixed at the bottom of the page. If you refresh the page or go to a new page the footer is then no longer fixed at the bottom of the page.
I have tried a few CSS solutions to create a Sticky Footer and they have worked in Firefox,Chrome and all the older IE's but not IE10. I have tried ryanfait's solution and cssstickyfooter but neither have worked for me.
I have the following CSS code for my footer currently:
#footer{background:#098a9d url(../img/headFootShadow.png) repeat-x 0 -8px;padding:20px 0 0;display:block;height:65px;margin-top:30px;color:#fff}
#footer a{color:#FFF;font-weight:700;text-decoration:none}
#footer a:hover{text-decoration:underline}
/*Sticky footer hack*/
html, body {height: 100%;}
html#lightbox{height:auto;}
#fullWrap {min-height: 100%;}
#main {overflow:auto;padding-bottom:105px;} /* must be same height as the footer*/
#footer {position: relative;margin-top: -85px; /* negative value of footer height */height:65px;clear:both}
As I said this works perfectly for Chrome,Firefox and the older IE's but not IE10. Would anyone know how to fix this or a possible workaround that would work? Any help will be greatly appreciated.
Many Thanks
Bernard
Since the fixed position footer is still a bit jumpy in 1.0b1, I would like to use a statically positioned footer on my pages. However, the footer does not automatically pin to the bottom of the screen as it does when fixed, when a particular page has less than a full screen of content.
does anyone know the preferred way to set the min height of the content div to force the footer to the bottom?
Providing your footer has the data-role=footer attribute and your pages have data-role=page...
[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}
That's how I've done it in a project of mine
I have a weird CSS problem. I have a banner that I need to position at the bottom of every page.
To this end I have set body to position: relative; and my banner to position absolute; bottom: 0px;
The problem is my banner positions differently on different pages such as the following:
http://www.plotsandhouses.com/node/1,
http://www.plotsandhouses.com/node/29,
http://www.plotsandhouses.com/node/30
The 'custom-page_closure_wrapper' div is what I am trying to position at the bottom of the pages. I can do this by setting position: fixed; but I don't really want the div visible at all times - only when the bottom of the page is visible or the user scrolls down to see it.
What am I missing?
To add on to Marc's answer, there is a CSS solution to it called the Sticky Footer.
The reason why your footer doesn't "stick" to the bottom of the page is because the height of the container where the footer is absolutely positioned in is not more than the height of the viewport. Therefore, by forcibly stretching the container to the full height, the technique ensures that the footer always stays at the bottom.
You can try adding the following in your CSS file:
body {height:100%;}
#custom-body-wrapper {height:100%;} /*this is the container of your absolute div*/
and removing the position:relative on your body tag.