I have a page that fits to the screen size of the browser window. It works in any browser, except in the latest firefox 79 for android devices (it worked until the last ff release).
The new firefox release hides the bottom of the page either with its toolbar or (if set to show toolbar on top) with a useless white bar of the same size on the bottom. I have buttons at the bottom that "shine" through that white "hiding bar", but they are not touchable. So, in principle, everything on the page is positioned correctly, except that firefox lays its "hiding bar" or it's toolbar over the bottom, depending on ff settings.
In CSS I have set html,body min-height to 100%. (It doesn't help when set to 100vh)
There's a wrapper div that encloses everything else, set to min-height 100vh.
There's a footer div (inside wrapper) set to position absolute, bottom 0;
Now the page fits the screen size including firefox's "hiding bar", thus part of the footer div is invisible. As the page isn't larger than the screen it cannot be moved up. There is no way to make visible the part of the footer that is overlayed by that white bar...
(If my description isn't clear enough I can provide images)
Anybody knows how I can position something at the bottom of the really visible screen, e.g. just above firefox's "hiding bar"?
Related
When switching to landscape mode in iOS Safari the vertical size of the address bar (and also the tabs bar, if multiple tabs are open) is added to the viewport, although I set the height of my layout container to window.innerHeight. The layout container itself is scrollable, so I don't want any scrolling behaviour outside that container. I tried almost everything to prevent that gap:
Setting the height of my layout container to the value of window.innerHeight
Setting html and body to the value of window.innerHeight
Setting html and body to height: 100%
But the scrolling behaviour persists - here are some screenshots showing the issue:
After initial loading or switching to landscape modus it looks like this (notice the scroll bar on the right side, although the layout container (and body and html is as high as the screenshot shows):
After scrolling the outer scrollbar to the bottom:
Is this a bug of Safari in landscape mode or am I missing something obvious?
I am using an iPhone XS as a test device. It seems that Safari, regardless of my CSS properties, automatically inserts this scrollbar or the space below my container as long as the address bar and tabs bar are visible.
In all other mobile browsers (Chrome, Firefox, Edge, Opera, Brave) it works without problems, the container is as high as the viewport (i.e. 100%) and there is no scrolling outside the layout container.
Has anyone else noticed this behavior before - and if so, can something be done about it?
I have a problem related with the css 'top' attribute of a Foundation modal.
I have long list of anchors and when I click in each anchor, a modal is opened. I have the css top attibute set to 100px.
When I use Chrome, even if I am in the bottom of the list and I click in one of the last anchors, my modal appears always at 100px of the top of the screen, i.e at 6356px of the top of the body. However, using Firefox, when I click in one of these last anchors, my modal appears at 100px of the top of the body, so I have to scroll up to see the modal. What can I do to make Firefox behave like Chrome?
I'm working on a site with a scaleable background image that fits the browser window, but am having issues when viewed on small browser windows.
When the page loads initially on a tall browser window, the image correctly anchors to the bottom of the browser window, and scales when the window is resized - ie, when the whole page is contained it's fine. However, if the page length exceeds the initial window height, when the page is scrolled, the image scrolls up, leaving a gap.
Here's a page to demonstrate (try it with tall window first, then short window, refresh and scroll down to see the problem):
http://kevin-atkins.co.uk/slc/about-us.html
How can I get the background image to fit to the bottom of the browser window and/or not leave a gap when scrolling?
You need to specify a width\height so that it can resize itself correctly.
Seeing as you have used css to set the background, you can use CSS3 Background Size. Most modern browsers support it, like follows:
#about-us {
background-size: 100%;
}
Alternatively, you can use an image tag and style that correctly (width\height) which takes up 100%
Reference:
Background Size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Hope this helps.
I am adding a footer to our organization's website. It looks just fine in Firefox (Mac and PC) and Safari (Mac). But, of course, not in IE 8.
I've got two divs (columns) on the left and middle and within them two rows of links. On the right side of the footer I have an image of our building I'd like to be flush to the top, right, and bottom.
In order to do that I had to make the image part of the background image of the footer. The footer is nestled within the larger content area and that content area has a margin or padding on the left and right sides. In addition, I wanted some extra space below the text so I added some padding (which prevents the image from sitting on the lower edge of the footer.
Here's the test page I am working on: http://americanart.si.edu/collections/index_footer.cfm
I'm stymied. Any fresh look would be appreciated.
The background is in the correct position, but your .col3 inside the footer is covering it. It has a grey background color and is 0px tall in smart browsers, but is rendering at 19px tall in IE even though it has no content. You should probably just remove that div if there is nothing in it.
I have a background-image used to separate my page footer from the main content. It displays fine when viewed in a browser window wider than the supported min-width of the page. However, if the window is resized to be narrower the image is pushed to the right relative to the main body.
How it displays in wide browser windows:
How it displays in narrow browser windows:
Can I set the main body content not to push right up against the left-hand side of the window, but rather keep the 30 pixel margin when viewed in a narrow browser window?
The page is live here if the CSS will be helpful.
Yes, you should give the <body> a min-width. Just a little above 1000 works for me on your website, but I don't have an exact value. Probably the exact width of the ribbon.
-edit-
ribbon (1000px) + border (2 * 1px) = 1002px, that should do it.
The problem is that your #footerTop and #footer are too big and are responding to the window shrink. The way I would get around this is by adding the background to the #footerContainer instead. If you align it to the centre it will always work since #footerContainer does not have a fixed width.
This will also mean that you won't get the horizontal scroll bar when the browser window is resized to 999px wide. It all depends on how small you want the window to be able to go