Menu
Why body overflow:hidden not working when viewport height is grater then css height?
ViewPort height is >700px and
css height is 300px
codepen http://codepen.io/vinaymavi/pen/aNMVYX
div{
border: 1px dashed;
height:55px;
}
body{
padding:10px;
width:100%;
height:300px;
border:2px solid red;
overflow:hidden;
}<html>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
</htmlOutput
519
From the CSS 2.2 spec for the overflow property
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'.
That is, overflow:hidden set on the body element, is moved to apply to the viewport instead. To avoid that happening, you can set the <html> element to not be overflow:visible.
i.e. add html { overflow:auto; } to the CSS.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
