Question

我有一个用css设计的html结构，我不明白为什么有一个scollbar /浏览器认为有溢出。我在当前的Chrome和IE11中对此进行了测试。

HTML基本上是这样的：

<div id="DIV_1">
    <div id="DIV_2">
        <div id="DIV_3">
            <!-- some tables, some content -->
        </div>
    </div>
</div>

（重要）css如下：

#DIV_1 {
    color: rgb(34, 34, 34);
    height: 100%;
    position: relative;
    width: 545px;
    overflow: hidden;
}

#DIV_2 {
    height: 100%;
    width: 545px;
}

#DIV_3 {
    height: 100%;
    width: 100%;
    overflow: auto;
}

DIV_3现在有了一个滚动条，我不明白它为什么会发生。

有关详细信息，请参阅相应的JsFiddle。

编辑：我知道如何隐藏带溢出的滚动条：隐藏！这不是我想要做的。

Answer 1

#TD_113 {
    padding: 0px 30px 0px 0px
}

是原因。但不是30px，而是因为padding-bottom已重置为0px。 Chrome的默认设置似乎为td { padding: 1px }并设置

#TD_113 {
    padding: 0px 30px 1px 0px
}

似乎为我解决了这个问题。我只能认为height: 13px没有padding-bottom的组合导致包含元素小于内容的，因此scollbar似乎允许您滚动查看内容。或者，更改为font-size: 14px或父<td>上的<tr>并单独保留填充也会删除滚动条。

更新：我创建了much shorter example问题，我可以在其中看到Chrome中的滚动条。我现在认为将border-spacing设置为0px会导致此问题，尽管您的小提琴上的padding问题仍然是我需要编辑的CSS才能删除滚动条。

#DIV_2 { width: 100px; line-height: 14px; } #DIV_3 { overflow: auto; } #TABLE_110 { border-spacing: 0px 0px; }

<div id="DIV_2"> <div id="DIV_3"> <table id="TABLE_110"> <tbody id="TBODY_111"> <tr id="TR_112"> <td colspan="4" id="TD_113">10.03.2015</td> </tr> </tbody> </table> </div> </div>

Answer 2

先生，问题是属性溢出：auto;这意味着只要内容大于容器，就必须显示滚动条，所以只需删除属性。

Answer 3

逻辑上，您获得垂直滚动条的原因是浏览器将内容解释为高度大于容器的高度...

在这种情况下，您的垂直边距会溢出并且不会被清除;

here's a fiddle重置为margin:0，overflow-Y消失了。

Answer 4

#DIV_1 {
    color: rgb(34, 34, 34);
    height: 100%;
    position: relative;
    overflow: hidden;
}

#DIV_2 {
    height: 100%;
    width: 545px;
}

#DIV_3 {
    height: 100%;
    width: 100%;
    overflow: auto;
}

删除了width属性并且它有效。

为什么有垂直滚动条，以及如何摆脱它？

4 个答案: