logo标签列表

在body元素上应用overflow:hidden

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

这是我的代码。然而，无论body的overflow:hidden属性如何，正文内的"haha"都会溢出到外面，我不知道为什么。
浏览器：Firefox 34.0.5
3个回答
6
在HTML中，只在body元素上设置overflow将影响根元素html，而不是body元素，这会使它看起来好像你从未在body元素上设置过它。 CSS规范详细说明了这个行为（尽管这种行为特定于HTML），但基本上就是这样，这是预期的行为，旨在满足更常见的控制页面滚动条的用例（因此您只需要在其中一个元素上设置即可）。这意味着它在所有浏览器中都以相同的方式工作。
您可以通过还在html元素上设置overflow来防止发生这种情况；这也在规范中声明。因此，您可以使用其他人提到的包装器div，或者您可以在html1上设置overflow:hidden或overflow:auto，这样您就不必使用包装器。
html {
    width: 100%; 
    height: 100%;
    overflow: hidden;
}

body {
    overflow: hidden;
    height: 300px;
    border: 6px solid red;
}
请注意，对于大多数元素来说，设置overflow: visible实际上相当于不设置它，因为这是规范定义的初始值。
0

这是因为你不能像那样对body进行样式设置。
尝试将

标签放在
标签内，然后给它一个高度为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;
    }

0
你需要在 body 标签内添加一个 div，并将所有的 h1 放置其中。然后对该 div 应用 overflow: hidden 样式。
<!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接