html - 为什么会有垂直滚动条，如何摆脱它？

Question

我有一个带有 css 样式的 html 结构，但我不明白为什么会有滚动条/浏览器认为存在溢出。我在当前的 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了解更多详情。

编辑:我确实知道如何使用 overflow: hidden 隐藏滚动条!这不是我想做的。

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> 上或 parent <tr>单独保留填充也会删除滚动条。

更新:我创建了一个 much shorter example我可以在 Chrome 中看到滚动条的问题。我现在相信设置 border-spacing至 0px在这种情况下是导致问题的原因，尽管 padding你的 fiddle 上的问题仍然是我需要编辑以删除滚动条的 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>