/
I am working on a website with the following layout:
<html>
<head></head>
<body>
<div id="left"></div>
<div id="main"></div>
</body>
</html>
And the following CSS:
* {
box-sizing:border-box;
}
html,
body {
height:100%;
margin:0;
padding:0;
}
html {
overflow:hidden;
}
body {
overflow:auto;
}
#left,
#main {
min-height:100%;
float:left;
}
The rest of the CSS isn't really important, but rest assured that I have the floats cleared, etc. The layout looks exactly as I want it to.
The purpose of the provided CSS is to make it so that #left and #main will be at minimum the height of the window, but if either grows larger, the page will grow larger with it. This is working as intended.
The issue is that I need to use the Y scroll position in my JavaScript at some point, but the bination of height:100% and overflow:auto on body are causing body's scrollTop property to always be 0.
If anybody has a JavaScript alternative or a small CSS change to fix this, that would be great. I would prefer to avoid larger CSS changes, but they still may be helpful.
Thanks!
http://jsfiddle/o7z1pnfx/
I am working on a website with the following layout:
<html>
<head></head>
<body>
<div id="left"></div>
<div id="main"></div>
</body>
</html>
And the following CSS:
* {
box-sizing:border-box;
}
html,
body {
height:100%;
margin:0;
padding:0;
}
html {
overflow:hidden;
}
body {
overflow:auto;
}
#left,
#main {
min-height:100%;
float:left;
}
The rest of the CSS isn't really important, but rest assured that I have the floats cleared, etc. The layout looks exactly as I want it to.
The purpose of the provided CSS is to make it so that #left and #main will be at minimum the height of the window, but if either grows larger, the page will grow larger with it. This is working as intended.
The issue is that I need to use the Y scroll position in my JavaScript at some point, but the bination of height:100% and overflow:auto on body are causing body's scrollTop property to always be 0.
If anybody has a JavaScript alternative or a small CSS change to fix this, that would be great. I would prefer to avoid larger CSS changes, but they still may be helpful.
Thanks!
Share Improve this question edited Oct 15, 2014 at 22:18 scwpton asked Oct 15, 2014 at 17:53 scwptonscwpton 511 silver badge4 bronze badges 5- have you tried $(window).scrollTop() ? – Mathieu Labrie Parent Commented Oct 15, 2014 at 17:58
- No - this site isn't using jquery. Edit: I just added jquery and tested it, and it returned 0 as well, despite that I was scrolled down the page. – scwpton Commented Oct 15, 2014 at 18:16
- Can you post the Javascript and create a fiddle with the relevant code or somewhere were we can see that behaviour? – Ismael Miguel Commented Oct 15, 2014 at 21:21
- Here's my fiddle: jsfiddle/o7z1pnfx Just scroll to the bottom and click the button. It will display that the scroll position is 0 (which is obviously incorrect). – scwpton Commented Oct 15, 2014 at 22:17
- Yup, it is an ugly a$$ bug... And a stupid one too... Y u no use Opera 12.17? – Ismael Miguel Commented Oct 15, 2014 at 22:53
5 Answers
Reset to default 2Tested on Firefox and it was not an issue. I believe it is a mistake with Chrome, and am reporting it as such. Don't know a workaround, doubt one exists.
Edit: sigh, also seems to be an issue in Safari.
Sorry for my late solution but I just encouter an issue just like you. The point is html tag doesnt like any overflow rule in it. Just remove any overflow from html and put in body and it work
Using just min-height won't break the scroll functions. (only tested in Chrome). 100vh seems to work fine too.
body, html {
min-height: 100%;
}
or
body, html {
min-height: 100vh;
}
Looks to me like you can get around this bug by using 100vh on the elements you want to always be the height of the window.
See the modified jsfiddle.
Viewport units arn't perfectly suported but it looks like this will work in most modern browsers.
Actually @scwpton, your answer lead me on the right track for a fine workaround. What happens is actually that webkit browsers don't repaint the page for some reason.
Forcing the repaint fixed the issue for me. I added the following code right before I animate the body element :
MLB.BODY = $("#body");
MLB.BODY.css("display", "none");
MLB.BODY.height(); // no need to store this anywhere, the reference is enough
MLB.BODY.css("display", '');
MLB.BODY.scrollTop(99999);
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742275536a4413517.html
评论列表（0条）