Well this is an odd behaviour.
I'm coding the frontend of a metrics app that must be viewed in a large tv.
I use Html, Js and Css (bootstrap 4).
It's for general public so we must hide browser tabs, etc..
Whenever I set the browser to go fullscreen, a big white row appears at the bottom of the page. Please see attached picture.
The odd part is that there isn't any element there. It's like the viewport just gets bigger and forgets to cover the bottom with stuff.
Is this a known issue?
How to avoid this and cover on fullscreen?
I'ver tried auto, cover, 100% height, etc..
I found the solution right after posting my question.
html,body
{
min-height:100%;
}
The thing is that if you apply height only to body, it will seek for the parent (html) and found that the size is the same as before so both must have the property in order to get the 100% of the height.
Related
I've been searching in other questions since this is a pretty common problem but none of them applied to my case.
I'm developing a small web app with React, just to get the basics, and the background img works fine in mobile view (there's a media query that changes it at 480px to a portrait one) it resizes from 480px to 320 and looks good.
The problem is that, at certain heights if you stretch or wide the window the background gets stucked in the middle of it (if you recharge the page it appears as it should, being the window in the same exact place as where the problem occurs).
The img is loaded through CSS in the html, If I remove the background-size property it works as expected in desktop and mobile, but when I cross the 1260px width it doesnt cover the full width.
I have this codesandbox with all my code: https://codesandbox.io/s/stoic-brahmagupta-ro2kb?file=/src/style.css
And I attach an image of the problem. Thanks in advance.
As u r testing this you can see the content of the App is overflowing the html element
I rather use min-height on global elements like body or html than static height to prevent such as cases.
So to fix it you just simply add
html {
height: auto;
min-height: 100vh;
To prevent not overflowing instead of scaling we just add min-height equaly of 100vh (viewport height).
I think it will propably do the job without height: auto; but i like add it to prevent even more edge casing
I've been battling with this simple issue for a while and I'm looking for some help...
I'm trying to make a full width colour banner that spans the full width of the page, but doesn't in any way affect the browser viewport sizing. I want it to be visible to human eyes, but I don't want it to affect the size/location of the browser's start view or scrolling behavior... just like it's not really there.
I also want to be able to place the banner in-line in the HTML.
Here is my test page: http://www.tanatu.com/widthtest
The Green Banner works perfectly, but it's y-location is defined in CSS (which is a pain)
The Pink Banner is my best guess so far, and works as intended on Chrome, but not on Safari on iOS, where the viewport is skewed to one side
Safari iOS Positioning Issue
Correct Positioning
I've been playing with this for months so any help would be MASSIVELY appreciated! :0)
Thanks!
Because you are trying to break out of your parent container that is where your challenge is. You can do this a few ways but I think the easiest without completely changing your markup would be to use a combination of viewport width units and calc()
If you change these attributes on #widthtest4 it should work:
#widthtest4 {
width: 100vw;
margin-left: calc(-50vw + 426px);
}
I currently have a website where I'd like the main body portion of the page and footer (below the header image and navigation bar) to always take up the available view space, but to expand below this if there's more content. I've been setting min-height of my container of class mainbody to a calc() function. The HTML and CSS have been tested and behave correctly in Safari and Chromium, however it fails to behave as intended on Firefox. The problem is most apparent on the Alumni page, which has no content at the moment, and also occurs on the Media page on a large enough screen . Is there anything I'm doing wrong?
100% height means 100% of the height of the content. To be honest, I don't know why it works in chromium and not in firefox.
What you need is 100% of the viewport. There are cool vw and vh units for that. (See availability.).
If you change min-height to min-height: calc(100vh - 268px) !important;, it will work.
If you want old style solution, you can google 100% height css, e.g. enter link description here
P.S.: Also fix your CSS.
I use a lot of absolute elements in my website design so that it will mold to whatever browser dimensions are being used, but there is a minimum size that I want to use. In other words, I want my website to become compact as the browser is being resized smaller but at a certain point I want the overflow:auto attribute to kick in and force the user to see the whole page using scrolling instead of compacting the page further.
Any ideas? I tried putting in an empty table with specific dimensions into an element with overflow:auto, but that didn't work. I am not a terribly experienced web-designer.
CSS
html, body {
min-width: 980px;
}
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}