Question

假设您有一个这样的HTML文档：

<html>
<head>
    <style>
        #a{
            overflow: hidden;
        }
        #b{
            height: 10000px;
        }
    </style>
</head>
<body>
     <div id="a">
        <div id="b">
        </div>
     </div>
</body>
</html>

在Chrome 42.0.2311.135上出现滚动条，至少对我来说是这样。但是我有溢出设置隐藏在占用空间的元素的父元素上。这不应该隐藏滚动条吗？仔细看后，它看起来像滚动条在html元素上。如果在html元素上将overflow设置为hidden，则滚动条将消失。

为什么滚动条会出现在html元素上？你如何控制它出现在哪个元素上？

Answer 1

控制外观的最简单方法是使用css作为html代码，然后可以将元素设置为可见或隐藏，如下所示：

a{
    visibility: hidden;
}

在此之后，标有“a”的div将不可见。

顺便说一句，你也可以在html中做到这一点：

<!DOCTYPE html>
<html>
<head>
<style>
h1.visible {
    visibility: visible
}

h1.hidden {
    visibility: hidden
}
</style>
</head>
<body>

<h1 class="a">This is a visible heading</h1>
<h1 class="b">This is an invisible heading</h1>
<p>Notice that the invisible heading still takes up space.</p>

</body>
</html>

Answer 2

经过一番摆弄后，我设法找到了问题。问题是#a div标签没有高度。然后它将扩展为#b div标签腾出空间。限制首先出现在HTML标记上，该标记与窗口的高度相同，这就是滚动条出现在那里的原因。

如何控制哪个元素获取滚动条？

2 个答案: