Question

如果以html格式保存下面的文件，则会出现垂直滚动条。

的高度

<div class="tabData" id="tab3data" style="visibility: visible;">

未设置，是否应自动展开以适应所有内容？

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        .tabData
        {
            width: 100%;
            background-color: Yellow;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="tabData">
        <div style="height: 390px; background-color: Green;">
            <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
            </div> 
        Hello
    </div>
</body>

Answer 1

由于您已经了解基于浏览器的开发人员工具，我将假设您已经检查了相关的div。我假设您在检查时查看了为该div明确定义的样式。我还假设您还检查了可能影响该div的继承样式。

可能有问题的div不是具有滚动条的元素吗？我的意思是，也许你有另一个元素缠绕在生成滚动条的div上。或者也许div中有一个生成滚动条的元素。换句话说，问题实际上可能不是有问题的div。

正如已经提到的，除非我们看到实际的代码，否则其他人很难提供帮助。如果你只是想摆脱滚动条，你可以像@Adriano建议的那样做，并将溢出设置为无。

Answer 2

height: 390px;的内部div内嵌.tabData，其内容不适合父级overflow: auto;的{{1}}。 }）在你的CSS中使它为此渲染垂直滚动。

如果您想保留当前结构，可以使用以下修复程序：
修复：http://jsfiddle.net/QvMfJ/

Answer 3

您有一个父容器div.tabData，其高度由子元素的总高度决定，其中有两个，内部<div>和包含单词“Hello”的匿名块

内部div的高度为390px，“Hello”行的高度约为1.5em。因此，具有黄色背景的父元素足以包围390px内部div和一行文本。

如果向内部div添加足够的内容，文本最终会流出具有绿色背景的内部div。这就是浏览器默认工作的方式，无论如何都会尝试使文本可见。

但是，就父元素而言，它具有基于390px + 1行高度的正确高度。当文本溢出固定高度的子元素时，浏览器不会重新计算块元素的高度。

如果继续向内部div添加更多文本，它将开始流过父元素中的任何文本，最终，它将溢出父容器并导致出现垂直滚动条，因为您设置了{{1在父元素上。

另一方面，如果你没有固定内部div的高度，你会得到预期的行为，内部div扩展为包含其所有内容，而父div扩展为包含内部div和一行文字。

示例

如果您尝试以下小提琴，http://jsfiddle.net/audetwebdesign/s3bnJ/，并调整水平宽度，您可以看到内部div流出内部div并进入父div的文本，最终，您将看到滚动条出现。

Answer 4

如果你希望它扩展以填充必要的空间，请尝试使用min-height;如果你不想增长它，或者有滚动条，请尝试使用隐藏。

Answer 5

使用overflow：none;

设置div

UPDATING：

根据div的内容显示方式，您可以尝试：overflow：hidden;。例如，如果滚动条出现，但您不必使用它来查看“隐藏”内容。参数将解决问题。

即使没有设置高度，也会出现垂直滚动条

5 个答案: