In my web app I have a sticky footer for small screens. The issue is that the sticky footer jumps up and down depending upon the state of the keyboard.
I am looking for it to be overlay by the mobile keyboard. Here is the css for the sticky footer
width: 100%;
position: fixed;
bottom: 0;
height: 85px;
left: 0;
right: 0;
Any workarounds for this?
It's best to use something other than fixed for smaller/touch screens, since you would have to account for a number of different problems. This keyboard issue is one, turning the device to viewport: landscape is another. It can also cause an issue with scrolling, since touch devices don't render certain things until the scroll has completed (meaning elements can react differently depending on how quickly the user swipes their finger to scroll). It's better to make a site that is reliable most of the time instead of having to figure out and account for all the different possible circumstances.
Even for "desktop" devices, if you can do something without fixed positioning, do it. In those cases, using fixed positioning is more of a shortcut than a best practice.
There are a number of ways to create a "sticky" footer without using fixed positioning, and this will help to keep your site optimized for the best viewing experience on most devices. If you google 'sticky footer', you'll find a number of great options. Some are below.
Ryan Fait's CSS Sticky Footer
CSS-Tricks sticky footer
Bootstrap sticky footer example
Related
I am trying to accomplish something a bit strange. I am working on a mobile-responsive website where in most of the pages all of the content fits inside the viewport so there is no overflow or scrollbars in most scenarios. This looks perfect when viewed on a desktop screen but I really want the tactile feeling of touch scrolling when viewed in portrait on mobile devices, as the page being completely static feels odd on a mobile website. I was thinking of just adding some blank space below the viewport by setting the 'bottom' attribute of my footer to a minus offset value like so:
#footer {
bottom: -20px;
position: absolute;
width: 100%;
height: 40px;
}
This sort of accomplishes what I am looking for and enables scrolling with the extra dead space but after scrolling up and down a couple of times, a blank white space that I assume is the height of the footer appears that is not covered by the pages background styles (which is applied to the page's body tag).
Is there any way of accomplishing what I am looking to achieve cleanly without modifying the rest of the page's content?
Thanks
The most annoying bit I run into whenever I make a web-page from scratch is getting the footer to stay at the bottom properly. The web is plagued with pages where the footer sits awkwardly in the middle on high definition screens.
Popular questions that talk about this:
Fix footer to bottom of page
How do you get the footer to stay at the bottom of a Web page?
My issue with the (valid) answers given to those questions is that they're relying on knowing beforehand the size of your footer, something that makes the website less responsive.
Is there any way to have the footer fixed at the bottom of the page that works on any screen and doesn't rely on predefined constants?
In the app I'm working on, I made use of #media to separate how it looks on mobile and desktop but discovered that 100vh is not always the full view port on mobile (discussion here). After some fiddling, I got this to work (as far as my Google Chrome developer console is concerned).
(Header and Footer are react components)
<Header/>
<div className="content">
<p>Content</p>
<div>
<Footer/>
.content {
#media screen and (max-width: 738px) {
min-height: calc(100vh - #{$footer-height-mobile} - 1.92 * #{$navbar-height});
}
#media screen and (min-width: 738px) {
min-height: calc(100vh - #{$footer-height-desktop} - #{$navbar-height});
}
}
The 1.92 was the only value that gave me the expected behaviour. Any less and it overflows, any more and it leaves empty space at the bottom. Is this an actual solution, or is it just a thing that happened to work in Google Chrome?
You can get the footer to behave like you mentioned by using flexbox. Here you can find a css-tricks article that talks about it.
I've had this issue before, and flexbox is a really good solution. There is a bug on IE11 though, where the distance between the content & footer is calculated wrongly when using an oversized image. But I think that's neglectable.
I would like to have a background image on a website. This seems like a pretty reasonable request.
I want the background image to be in a fixed position, so that the content scrolls over the top of it. On a classic desktop browser, you can use something like background-attachment: fixed, but this has no affect on my small touch screens. Instead the image scrolls along with you.
It would be great if I could have a position: fixed div with the background image - could accomplish this... but then there is another issue where the 'chrome' or the UI for these touch/small-screen browsers / changes the size of the view-port to accommodate it's buttons - and then again when you scroll down + the buttons go away and the viewport is now taller. (this is not a new problem, but it seems like a problem everyone is OK with.) I am wondering if I'm missing some other option / . I've been trying to find a way around this for years.
<div class='background'></div>
.background
background-image: url('some-image.jpg')
position: fixed
top: 0
right: 0
bottom: 0
left: 0
http://codepen.io/sheriffderek/pen/pbQpwp
Debug view for phone: http://s.codepen.io/sheriffderek/debug/pbQpwp
At the moment i have a site with many divs set at certain sizes to keep the layout correct.
The only problem is that on some displays the footer is always off the bottom and you have to scroll to it.
I have noticed other sites where no matter the screen resolution, the footer will always auto scale to the bottom of the screen.
Is there a way, other than going through all of my divs and using % for all the heights, to set the footer tag to always be at the bottom of the screen?
My basic site is jj-triggs.com which has a footer that, if on a widescreen monitor or smaller resolutions, pushes the footer off the bottom and you have to scroll to it,
It is possible to fix by changing the size of the divs, but there are so many that would have to be changed. There must be a simpler way of doing this?
Without using % it will not fit in all screens correctly.
You can try bootsrap I use this to fit in all screens.
Then to fix the footer.
Create a empty div before and make it style to clear:both
or you can try
Position:fixed; bottom:0;
But this will always keep the footer on screen no matter what the page size is
Are you searching for making your footer fixed to the bottom ? If so you can do that with CSS :
position: fixed;
bottom: 0;
Since a couple of weeks i'm building a new website. This website starts to look pretty good but there is one problem.
When i view my website in a browser window that is smaller than the actual webpage, the menubar on top of the page gets cut off. I can't scroll up and down the page, but the top part can't be reeched.
This problem probably has something to do with the 'center' code I use for center vertically. Is there an solution where i can keep my webpaged centered but still can reached the hole page once I'm using a small window?
I all ready solved the problem in Chrome mobile by using a 'viewport' metatag.
Sadly the desktop browsers like IE, safari, Chrome etc. still refuse to show the topbar of my webpage when the window is small.
Here is a link to my website:
test.themissingsticks.com
Try viewing it in a fullscrene window (with a resolution above 800px height) and view it with a window of less than 600px height. You will notice the gray menubar on the top of my website will not show, net even when you try to scroll upwards.
The website is centered by the following line of css:
top: 50%;
margin-top: -340px;
left: 50%;
margin-left: -513px;
width of the page is 1026px and height is 680px.
Please help. Thanks in advance!
go to style.csss
change css of "menutms"
replace margin-top: -340px; by margin-top: -300px;
it will work in all browser.
Found the answer! I made 2 div's for vertical and horizontal center alignment. These two are positioned absolutely. the rest of the hole webpage is positioned relatively inside these div's.
The only downside is that IE9 is not displaying the site very well.
Here's a disciption of the method:
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/