CSS webkit overflow hidden and HTML element height

Question

http://dev.anuary.com/1f1715ac-ad96-536a-a462-74381c7a2baf/test.html http://dev.anuary.com/1f1715ac-ad96-536a-a462-74381c7a2baf/test2.html

test2.html is the expected behaviour. However, it does not implement test.html CSS body {overflow: hidden;}. The latter is needed to prevent WekKit from overscrolling.

Essentially, I need a page with WebKit overscrolling disabled, with an element in DOM width and height 100% (100% meaning window size) and overflow-y: scroll. The only workaround that I managed to figure out is to use JavaScript to give fixed height to the or the wrapping element. Though, preferably I am looking for a solution that doesn't involve JS.

ThinkingStiff · Accepted Answer · 2012-07-12 07:15:10Z

1

You need to set height: 100%; on html and body otherwise they will be much larger than the visible window size.

Demo: http://jsfiddle.net/ThinkingStiff/8ejtP/

html, body {
    height: 100%;
}

edited Jul 12, 2012 at 7:15

answered Jul 12, 2012 at 7:08

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS webkit overflow hidden and HTML element height

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related