I integrated a body image, so far so good. But when I go to mobile view and scroll my page, the image of the body goes up. Shows a white margin at the bottom of the screen for about 1 second and finally load all over the screen. But the phenomenon occurs every time I go back and down my page.
Does anyone have a solution or can explain to me why this is happening?
Thank you
Add this on top of your CSS file:
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;}
It works for me :)
Related
I've been trying to fit the video into the full screen but had no luck. As per pics the video has two (white) pillars (Please click on the picture), the video dimension is 1280x720. I have tried changing the dimension of the video which didn't work. Can anyone help with this, please?
This video is in a section
Below CSS
#myVideo {
position: fixed;
background-size: cover;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -100;
filter: brightness(60%);}
remove margin from body and html
html, body{
margin: 0;
}
If still doesn't work, then open developers pane in Google Chrome and highlight the white area to see which element is generating the white space.
Seems like a margin issue with the video div, or a padding issue with whatever parent div. Link to page?
I have this Google Apps Script web app. it should simply show a blue background that is the height of the view-height of the screen.
Here is the code
<html>
<head>
<style>
html, body {
margin: 0px;
height: 100vh;
background-color:lightblue;
}
</style>
</head>
<body>
</body>
</html>
The problem is that the body is not displaying as 100% of the available view-height. This is because some of the view-height is taken up by the "This app was created by another user" banner.
Instead, then, a scroll-bar appears on the right (screenshot attached). A scroll bar for the app iframe height set to 100vh + the height of the banner.
So when I add content to the body, that is greater than the height on the view-height, I get 2 scroll bars, one for the body (as it should be) and one for the iframe. Confusing the user.
Is there any way I can make the iframe be a height that gets rid of the scroll bar?
Changing body height to less than 100vh has no effect nor using % or px units.
note: I am not asking how to remove the banner. I am asking how to resize the iframe that houses the body despite the banner
thanks
EDIT: Added after scroll screenshot showing the banner going off the screen.
EDIT2: Ahh...Yes IE doesn't do it either, as well as FF. Seems to be Chrome specific
EDIT 3: also tried this style as per comments below
<style>
html, body, iframe#sandboxFrame, .full_size {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: lightblue;
}
</style>
EDIT 4: I've now raised an issue tracker here
html, body, iframe#sandboxFrame, .full_size {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
Deactivate these styles in the web browser using google chrome tools, then add 100vh to the element(s) that need it. You should be able to get the result you want then.
I tried this and the div magically takes full height on a GAS WEB APP, but sorry that I am not experienced enough to explain further...
#divID {
position: fixed;
height: 100%;
top: 0;
width: 100%;
}
I have been trying to set my footer in my web for a while with no luck..
The footer sticking to the bottom of the screen, and if there is scroll-bar, so when I scroll down, it will slide up...
I want it to stick to the bottom but not like position: fixed (if there is scroll-bar, then I don't want to see the footer until I scroll to the bottom).
There is 3 main components in my web (header, content and footer).
This is the footer css:
background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
I have tryed changing html and body to "height: 100%" but the only thing that was almost like I wished for, was when it made the height bigger than the screen.
It was like height: 110% (even though the sum of heights was 100%).
I Tryed to reduce it, until I fit but it every little change in the UI make troubles.
I would very appreciate any help..
Sounds like you are looking for <footer>. Keep in mind it won't work in early versions of Internet Explorer. Here is some more information. Let me know if this works out.
Try this on your footer -
.footer {
position: relative;
bottom: -500px; // you can adjust the negative value
}
I'm having trouble with a large image on my page, I can't seem to avoid it causing a scroll on certain browsers. So far I can only see it on Safari, but my friend apparently also see's it on Chrome.
All I'm doing, is positioning an image inside its container absolutely, and then moving it right, so that it actually outside of the container and wrapper. The problem is, that its quite a large image, so in some browsers you are able to scroll to the right revealing the rest of the image. Here's the code.
<html>
<head>
<style>
body{
background: aqua;
margin: 0;
overflow-x: hidden;
}
#wrapper{
background: #fff;
width: 960px;
height: 100%;
margin: 0 auto;
}
#content{
width: 960px;
height: 500px;
background: yellow;
position: relative;
}
#image{
position: absolute;
bottom: 0;
right: -320px;
z-index: 0;
width: 1210px;
height: 468px;
background: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="image"></div>
</div>
</div>
</body>
</html>
and heres a fiddle that deomonstrates it: http://jsfiddle.net/alsweeet/5mqHf/
Adding the overflow-x: hidden to the body style seems to solve the problem in most browsers, but not safari. You will see that I have not added this yet into the fiddle demo, and once you add it, you won't be able to scroll left or right anymore, which is the effect I'm trying to achieve cross browser.
I would sure appreciate some advice on this one. I'm sure there's probably a better way of doing this than absolutely positioning it.
Thanks!
Alsweeet
edit: problem IS occurring on Chrome also, the scroll bar is hidden, but you are still able to scroll sideways. Still works fine in Fire fox though.
edit: heres a screen shot to help explain what i'm trying to achieve without any side scroll. The red box is the box which is causing the side scroll. You can see that the red box is outside of the 960 wrapper.
this is what you are looking for?
DEMO
http://jsfiddle.net/5mqHf/4/
overflow-x: is not fully cross browser compatible, try using overflow:hidden;, as long as you don't need to scroll vertical on the element then that will never cause you an issue.
A workaround to have overflow-y on an element and restrict the overflow-x on another element is this fiddle.
http://jsfiddle.net/5mqHf/7/ - Fix for image position
A consideration for this is that if you are going to scroll vertically, when looking at the width of the image element, you need to account for the wdtih of a scrollbar to avoid a horizontal scroll bar, this usually varies between 15px and 30px depending on the browser.
Please have a look. Is it matching your requirements. if no please let me know so I can try something more.
DEMO
http://jsfiddle.net/saorabhkr/FyJ4F/
This problem has been perplexing me for a while now, and I've tried researching it but so far I've just turned up sites that tell me how to center things but that's not the problem. The problem is that while #content looks like it's centered, when the page takes up more than one screen it causes the #content to appear about 5px to the left of where it appears when it is less than one screen in height. Is there a way to fix this without forcing my shorter pages to reach the bottom screen or beyond?
Here's how I'm centering my content:
body {
margin: 0;
padding: 0;
}
#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}
I'll admit that there's a couple more divs in there, but I don't that's really relevant to this problem...
#asc99c is right.
The scroll bar is causing your problem.
When it appears, it pushes everything over.
To solve this (if you must), you could make your pages taller than 100%. Something like
body, html{
height:100%;
}
div{
height:101%;
}
With div being your main content div.
Example: http://jsfiddle.net/jasongennaro/7NYnS/
The following CSS will force the vertical sidebar to appear, even on pages that are shorter than the viewport height. This will prevent the horizontal shift that you're noticing.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Via http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/