将溢出隐藏应用于正文

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

这是我的代码。不过，体内的"哈哈"溢出体外，不管身体的溢出：隐藏属性，也不知道为什么。

浏览器：火狐 34.0.5

在 HTML 中，仅在 body 元素上设置 overflow 会影响根元素html而不是body元素，使其看起来好像您从未真正在 body 元素上设置过它。

CSS 规范有关于它如何工作的细节（尽管这种行为特定于 HTML），但这基本上就是正在发生的事情，它是预期的行为，旨在迎合控制页面滚动条的更常见的用例（所以你只需要在其中一个元素上设置它，而不是两个元素）。这意味着它在所有浏览器中的工作方式都相同。

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

html {
    width: 100%; 
    height: 100%;
    overflow: hidden;
}
body {
    overflow: hidden;
    height: 300px;
    border: 6px solid red;
}

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

您必须在正文标签中添加一个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>

这是因为你不能那样设计身体。
尝试将h1放在div内，然后将其高度定为 300 并隐藏溢出。
这样

.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;
    }

相关内容

最新更新

热门标签：