gpt4 book ai didi

html - 为什么 body 溢出不起作用?

转载 作者:搜寻专家 更新时间:2023-10-31 22:02:08 24 4
gpt4 key购买 nike

为什么 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

输出 enter image description here

最佳答案

来自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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com