Question

我有一个像这样的简单页面布局：

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.table-wrapper {
    display: table;
    width: 1366px;
    height: 100%;
}

.cell-left {
    display: table-cell;
    width: 240px;
}

.cell-right {
    display: table-cell;
    width: 1126px;
}

HTML：

<div class="table-wrapper">
    <div class="cell-left"></div>
    <div class="cell-right">

    /* Some really long content */

    </div>
</div>

当.cell-right中的内容变得足够长，浏览器显示垂直滚动条时，它还会添加水平滚动条，这真的会破坏我的布局。如果我在.table-wrapper上放置100％的宽度，问题就会消失，但它也缩小了我不想要的两个单元格。我必须在所有3个元素上都有固定的宽度，以便对项目所需的响应式设计进行适当的调整。两个单元格都需要跨越文档高度。

有趣的是，Internet Explorer 11没有这个问题，但Firefox和Chrome都有。如何防止水平滚动条出现？

修改

我忘了添加我在1366x768的屏幕分辨率上测试它。如果您想在自己的屏幕上自行测试，只需更改数字。

这是小提琴：

http://fiddle.jshell.net/zddm6asz/1/show/

这是1920x1200的另一个：

http://fiddle.jshell.net/zddm6asz/2/show/

Answer 1

编辑：在尝试此之前，请参阅此答案下的第一条评论。

如果你添加

overflow-x: hidden;

对于.cell-left和.cell-right，这样可以防止单元格获得水平滚动条。

Answer 2

我使用display时出现了水平滚动条的问题：table-cell;对于某些元素。滚动条应用于整个页面，但应用overflow：hidden;这些细胞的含有元素解决了这个问题。在你的情况下，将应用溢出：隐藏;到.table-wrapper。

此外，您可能不希望为表包装器设置像素宽度。为什么不尽可能将其设置为最大宽度的百分比？尤其如此，您正在尝试响应式设计。

出现在显示屏上的水平滚动条：表格元素

2 个答案: