Question

<!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>

这是我的代码。然而，身体内部的“哈哈”溢出身体，无论溢出：身体的隐藏属性，我不知道为什么。

浏览器：Firefox 34.0.5

Answer 1

在HTML中，仅在overflow元素上设置body会影响根元素html ，而不是 body元素，看起来好像你从未在body元素上实际设置它。

CSS spec详细说明了它是如何工作的（虽然这种行为特定于HTML），但这基本上就是发生了什么，它是预期的行为，旨在迎合更常见的用例控制页面滚动条（所以你只需要在任一元素上设置它而不是两者都设置）。这意味着它在所有浏览器中的工作方式相同。

您也可以通过在overflow元素上设置html来防止这种情况发生;这也在规范中说明。因此，您可以使用其他人提到的包装div，也可以在overflow: hidden ¹上设置overflow: auto或html，这样您就可以不必使用包装器：

html {
    width: 100%; 
    height: 100%;
    overflow: hidden;
}

body {
    overflow: hidden;
    height: 300px;
    border: 6px solid red;
}

¹ _{请注意，设置overflow: visible实际上与大多数元素的设置完全相同，因为它是规范定义的初始值。}

Answer 2

这是因为你不能像这样塑造身体尝试将h1放入div内，然后将高度设为300并隐藏溢出。
Like so

<强> HTML

<div>
    <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>
</div>

<强> CSS

    div {
        overflow:hidden;
        height: 300px;
        border: 6px solid red;
    }

Answer 3

你必须在body标签内添加一个div并将所有h1放入其中。然后应用你的溢出：隐藏到它。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
    width:100%; 
    height:100%;
}

body div{
    overflow: hidden;
    height: 300px;
    border: 6px solid red;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>

应用溢出隐藏到身体

3 个答案: