将隐藏的溢出应用于body [英] Applying overflow hidden to body
问题描述
<！DOCTYPE html>
< html>
< head>
< style type =text / css>
html {
width：100％;
身高：100％;
}
body {
overflow：hidden;
height：300px;
border：6px纯红色;
}
< / style>
< / head>
< body>
将H1>哈哈< / H1>< H1>哈哈< / H1>< H1>哈哈< / H1>< H1>哈哈< / H1>< H1>哈哈< / H1>< ; H1>哈哈< / H1>< H1>哈哈< / H1>
将H1>哈哈< / H1>< H1>哈哈< / H1>< H1>哈哈< / H1>< H1>哈哈< / H1>< H1>哈哈< / H1>< ; H1>哈哈< / H1>< H1>哈哈< / H1>
将H1>哈哈< / H1>< H1>哈哈< / H1>< H1>哈哈< / H1>< H1>哈哈< / H1>< H1>哈哈< / H1>< ; H1>哈哈< / H1>< H1>哈哈< / H1>
< / body>
< / html>
这是我的代码。
然而，身体内的哈哈溢出身体外，无论溢出：身体的隐藏属性，我不知道为什么。
浏览器：Firefox 34.0.5
在HTML中，设置 overflow 只有 body 元素才会影响根元素 html 而不是 body 元素，使得它好像从未真正将其设置在 body 元素中。
CSS规范详细说明了这一点（尽管这种行为是针对HTML的），但基本上就是发生了什么，并且这是预期的行为，旨在迎合控制页面滚动条的更常见的用例（因此您只需将其设置为元素而不是两者）。这意味着它在所有浏览器中的工作方式都是相同的。
通过设置 overflow 在 html 元素上;这在规范中也有说明。所以你可以使用一个包装器 div ，如别人所说，或者你可以设置 overflow：hidden 或 overflow：auto on html 1 所以你不必使用包装： p>
html {
width：100％;
身高：100％;
overflow：hidden;
}
body {
overflow：hidden;
height：300px;
border：6px纯红色;
code
$ b $ p $ 1 $ 注意，设置 overflow：visible 实际上与大多数元素完全不设置它是一回事，因为它是由spec定义的初始值。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
width:100%;
height:100%;
}
body {
overflow: hidden;
height: 300px;
border: 6px solid red;
}
</style>
</head>
<body>
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1>
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1>
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1>
</body>
</html>
This is my code.
However, the "haha" inside the body overflow outside of body, regardless of the overflow:hidden property of body, and I don't know why.
Browser:Firefox 34.0.5
解决方案 In HTML, setting overflow only on the body element will have it affect the root element html instead of the body element, making it seem as though you never actually set it on the body element.
The CSS spec has the details on how this works (although this behavior is specific to HTML), but that is basically what is happening, and it is expected behavior, designed to cater to the much more common use case of controlling page scrollbars (so you would only have to set it on either element and not both). This means that it works the same way in all browsers.
You can prevent this from happening by also setting overflow on the html element; this is also stated in the spec. So you can either use a wrapper div, as mentioned by others, or you can set overflow: hidden or overflow: auto on html1 so you don't have to use a wrapper:
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
overflow: hidden;
height: 300px;
border: 6px solid red;
}
1 Note that setting overflow: visible is effectively the same thing as not setting it at all for most elements, because it's the initial value as defined by the spec.
这篇关于将隐藏的溢出应用于body的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
