隐藏水平滚动条

Question

隐藏水平滚动条

4

我有一个关于水平滚动条的问题。我不想让它出现。实际上，它只在 Chrome 中出现，在 Internet Explorer 中则没有。我该怎么办？我已经尝试修改 css 类中的宽度和填充，但这也会改变布局。测试内部的内容是动态的，所以它可以在垂直方向上溢出，这是可以接受的，因为我只想要水平滚动条。

HTML：

<div class="test">
    <table>
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>

CSS:

.test {
    BORDER-TOP: #7F9DB9 1px solid;
    BORDER-RIGHT: #7F9DB9 1px solid;
    BORDER-LEFT: #7F9DB9 1px solid;
    BORDER-BOTTOM: #7F9DB9 1px solid;
    WIDTH: 100%;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 10px;
    PADDING-BOTTOM: 10px;
    PADDING-TOP: 10px;
    HEIGHT: 100%;
    BACKGROUND-COLOR: #ffffff
}

这里有一个 jsfiddle，如果需要可以使用：http://jsfiddle.net/XLY9L/。谢谢。

- Gyonder

请更改问题标题，因为它没有表达您的问题。 - Dmytro Grynets

5个回答

8

您可以尝试简单的方法

BODY {
    overflow-x:hidden;
}

- Michał Wrotkowski

3

将以下代码添加到你的CSS中。它将禁用你的水平滚动条。

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

- vasanth

1

是的，因为它还会禁用滚动。我们希望能够水平滚动。这将禁用该功能。 - Radmation

3

除了@micadelli的回答外，您还可以删除width: 100%，因为<div class="test">是一个块级元素，它会自动填充当前容器中占用的水平空间。

- Amy

2

“box-sizing”有其适用的场景，但这并不是正确的解决方案。将100%宽度添加到块级元素只会引入一堆问题，因此了解为什么不需要它非常重要。另外，如果需要支持IE7（呃），那么“box-sizing”就行不通了。 - CherryFlavourPez

我同意这个答案，如果没有特殊原因需要手动将其宽度设置为100%。 - micadelli

基于提供的简化案例，这是最简单的解决方案。我很好奇你何时选择手动将width设置为100％？ - CherryFlavourPez

@CherryFlavourPez 我必须承认，我没有想到一个简单的情况来使用那个100% :) 但是我真正想表达的是 如果宽度不需要明确设置为任何百分比。 - micadelli

@micadelli 绝对没错 - 修改所有元素的盒模型(* FTW)几乎肯定会让OP未来的生活更轻松。对于响应式网站，我发现这是唯一的选择。但即使在这种情况下，你也不会明确将宽度设置为100% - 它没有任何作用。 - CherryFlavourPez

没错，这只会让事情变得更复杂，我个人觉得如此。阿门！ - micadelli

0

你也可以在你的网站中尝试这个简单的CSS代码。只需在body标签上写入overflow-x:hidden;，它就会从你的页面中隐藏。

- Ihsan Khattak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- micadelli · Accepted Answer

这个问题有一个简单的解决方案，只需将以下内容添加到您的CSS声明中：

box-sizing: border-box;

水平滚动条出现的原因是默认情况下，padding和border会被添加到你给元素的任何宽度中。通过显式地将它设置为border-box，padding和border将包含在该宽度值中。

这个属性在IE8+，FireFox 19+（使用-moz-box-sizing）以及iOS Safari和Android（使用-webkit-box-sizing）中都得到支持。

此外，我强烈建议使用以下的简写css格式：

.test {
    BOX-SIZING: border-box;
    WIDTH: 100%;
    HEIGHT: 100%;
    PADDING: 10px 0 10px 10px;
    BORDER: #7F9DB9 1px solid;
    BACKGROUND-COLOR: #ffffff;
}