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
Related
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
I am working on a website and have tried to stick the footer to the bottom, since many pages will not be long enough to push the footer to the bottom.
I have applied this technique: http://mystrd.at/modern-clean-css-sticky-footer/
My page can be viewed here: https://jsfiddle.net/cgLf0oLa/
I believe that this CSS input is very important:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px;
}
However, I am experiencing trouble. The footer is being rendered on top of the other content, and I have no clue how to make it adjust to the content size.
Help is much appreciated.
Kind regards,
Clemens
Try adding an :after with height equal the height of the footer to the wrapper above the footer. It leaves blank area below the footer, which pushes the footer to the bottom.
I'm doing some web development and for some reason on some of the pages the scrollbar on the right side of the window is transparent or white when using Chrome. I've looked through my css and I don't see any scrollbar styling set. The scrollbars look normal in firefox.
If it's because the page is so short that no scroll bar is required, but you still want it to show up, you can set the overflow-y CSS property to scroll on the html element of the page. For example:
html {
overflow: auto;
overflow-y: scroll;
}
I'm having trouble finding where I have the CSS wrong on this site. On Firefox, it's showing side scrolling to the right but on Chrome, it looks fine. I'm thinking overflow:hidden; but I can't seem to find where to put that.
Here's the site: http://www.llmedia.co/
Appreciate it!
The problem is in your footer. Your whole page width is 960px. But the footer ul width is 1100px. So in small screens your site will have a scroll bar to the right. Same result will happen in firefox browser too. So reduce the footer width to 960px and your scroll bar will disappear!
#footer ul { width: 960px; }
I see a scrollbar in Chrome so I'm guessing it has to do with your viewport size. Try shrinking your browser window in Chrome and see what happens. Be careful with using overflow:hidden;. You may be hiding content from users who don't have a large viewport for whatever reason.
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