由于垂直滚动条而出现水平滚动条 - HTML 布局答案

【问题标题】：Horizontal scrollbar appearing due to vertical scrollbar - HTML layout由于垂直滚动条而出现水平滚动条 - HTML 布局
【发布时间】：2013-02-12 12:50:56
【问题描述】：

请看 http://jsfiddle.net/RRkC7/

我已将封闭 DIV 标记“c”的宽度设置为子表 t1 的宽度。但是，由于水平滚动条的原因，出现了垂直滚动条。理想情况下，由于“c”的宽度与“t1”完全相同，因此不应出现水平滚动。

以及如何避免这种情况的想法。

请注意，我不能硬编码任何东西。当添加更多内容时，内部 TABLE 的宽度可能会增加，当这种情况发生时，我会调整容器 div 标签的大小。

我还希望在表格宽度超过一定数量的情况下同时显示水平和垂直滚动条。

谢谢，阿伦

<div id="p" style="overflow:hidden">
    <div id="c" style="overflow:auto">
        <table id="t1">
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
        </table>
    </div> </div>

【问题讨论】：

标签： html css

【解决方案1】：

这可能是因为填充，我不知道，但修改你的 javascript 工作。

$(function(){
    $("#c").width($("#t1").width() + 20);
    $("#c").height(150);
})

http://jsfiddle.net/RRkC7/1/

我玩弄了表格内的元素，宽度改变得很好

【讨论】：

【解决方案2】：

为您的 c div 指定一个宽度，并且不要为表格定义任何宽度，这样在这种情况下表格将继承 c div 的宽度。现在使用表的溢出属性。所以，现在滚动条只有在表格获得更多数据并且它的宽度将大于为 c div 定义的宽度时才会出现。

    overflow:scroll;

【讨论】：

【解决方案3】：

这不是关于从宽度中添加或减去固定数量，而是如果您注意到 CSS padding: 5px 将 div 的宽度增加了 2 倍的填充，因为 padding-left 和 padding-right 会出现在图片中。因此，您需要添加准确的填充量，在本例中为 10px。

你可以像这样计算宽度和内边距

$(function(){
    var toBeWidth = $("#t1").width() + (parseInt($("#t1").css("padding-left").split("px")[0])*2)
    $("#c").width(toBeWidth);
    $("#c").height(150);
});

【讨论】：