为什么 body overflow:hidden 在视口(viewport)高度大于 css 高度时不起作用？
ViewPort 高度 >700px 并且
css 高度为 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>
</html输出
最佳答案
来自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'.
即overflow:hidden设置在 body 元素上，改为应用于视口(viewport)。为避免这种情况发生，您可以设置 <html>元素不溢出:可见。
即添加 html { overflow:auto; }到 CSS。
关于html - 为什么 body 溢出不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41506456/