1

如果您将下面的文件保存为 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>

4

5 回答 5

0

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

难道有问题的 div 不是具有滚动条的元素吗？我的意思是，也许你有另一个元素包裹在 div 周围，它产生了一个滚动条。或者也许 div 中有一个元素正在生成滚动条。换句话说，问题实际上可能不是有问题的 div。

正如已经提到的，除非我们看到实际的代码，否则其他人很难提供帮助。如果您只想摆脱滚动条，您可以按照@Adriano 的建议进行操作，并将溢出设置为无。

于 2013-04-10T16:08:51.043 回答
0

您的内部有一个内联height: 390px;，div其.tabData内容不适合该高度，因此在您的 CSS 中overflow: auto;的父级 ( tabData) 上使其呈现垂直滚动。

如果您想保留当前结构，这里有一个修复：
修复：http: //jsfiddle.net/QvMfJ/

于 2013-04-10T18:49:18.250 回答
0

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

内层div的高度为 390px，“Hello”行占据了大约 1.5em。因此，黄色背景的父元素刚好能将390px的内部div和一行文字围起来。

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

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

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

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

例子

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

于 2013-04-10T19:22:00.910 回答
0

如果您希望它扩展以填充必要的空间，请尝试使用 min-height ，或者如果您不想增长它或使用滚动条，请尝试使用 overflow:hidden 。

于 2013-04-10T22:46:12.507 回答
-1

用溢出设置div：无；

更新：

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

于 2013-04-10T15:34:45.250 回答