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

如果以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>

来源

2013-04-10 Foo

在Firefox中使用萤火虫工具 – 2013-04-10 15:12:42

尝试它，除了建议检查是否设置了overflow：auto（如果是的话，设置为overflow：visible），我不认为任何人都可以在没有看到代码的情况下提供帮助 – hexblot 2013-04-10 15:13:04

或者使用通过按F12在IE或Chrome中开发人员工具。这将使您能够进行调试 – davidb 2013-04-10 15:13:34

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

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

如果将足够的内容添加到内部div，文本最终会流到具有绿色背景的内部div之外。这是默认情况下浏览器的工作原理，他们试图使文本无论如何都可见。

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

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

另一方面，你是不是固定内部div的高度，你会得到预期的行为，内部div展开来包含其所有内容，并且父div展开以将内部div和一行文字。

例

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

来源

2013-04-10 19:22:00

-1

设定溢出股利：无;

UPDATING：

取决于如何div的内容被证实可以试试这个：溢出：隐藏;.例如，如果滚动条出现，但您不必使用它来查看内容，则“隐藏”参数将解决问题。

来源

2013-04-10 15:34:45

没有'overflow：none'这样的东西。 – BoltClock 2013-04-10 16:10:57

对不起，这是一个类型错误。我的意思是溢出：隐藏;解决问题。 – 2013-04-10 16:45:48

你可以编辑你的答案... – SQLMason 2013-04-10 17:48:02

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

难道是所讨论的div不是具有滚动条的元素吗？通过这个我的意思是，也许你有另一个元素缠绕在生产滚动条的div上。或者也许在生成滚动条的div内有一个元素。换句话说，问题实际上可能不是所讨论的div。如前所述，除非我们看到实际的代码，否则这对其他人来说很难提供帮助。如果你只是想摆脱滚动条，你可以按照@Adriano的建议做，并将溢出设置为无。

来源

2013-04-10 16:08:51 SunSparc

你的.tabData内div有一个内嵌height: 390px;及其内容不适合在这样的高度，overflow: auto;在你的CSS父（tabData）使它呈现垂直滚动出于这个原因。

这是一个修复你，如果你想保持当前的结构：
修复：http://jsfiddle.net/QvMfJ/

来源

2013-04-10 18:49:18 Arbel

为什么scroll没有出现在绿色区域？为什么它出现在没有设置高度的父母（黄色区域）？ – Foo 2013-04-10 18:53:50

因为在父级上设置了“overflow：auto;”。如果您想保留当前的结构，我为您添加了一个修复程序。 – Arbel 2013-04-10 18:57:55

我在浏览器中尝试了您的修复程序，对不起，它似乎没有工作:( – Foo 2013-04-10 19:00:02

尝试使用最小高度，如果您希望它扩大以填充必要的空间或溢出：隐藏如果不想增长或滚动条。

来源

2013-04-10 22:46:12 Tracker1

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

回答

相关问题