CSS - 如何防止水平滚动？

Question

这个问题可能有一个简单的解决方案。

我设计了一个有两列并排的网站。除了右列，一切都是固定的(菜单栏和左列)。

这是故意的，因为我只想让右列滚动，因为它将容纳页面可读内容。所以一切都很好，对吧？

不完全是这样，左列是向左浮动的，右列也是浮动的，并且有足够大的左边距，以允许在加载时正确地放置在页面上。

然而，当屏幕水平太小时，用户可以左右滚动，移动第二列，甚至在我的固定第一列下面。这就是我要防止的。

如何使第二列垂直滚动但不水平移动？

以下是css的片段：

#main-content {float: left; margin: 100px 0 0 0; background: rgba(128,127,128,0.9); padding: 15px 25px 15px 15px; width: 500px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
#button-glue {float: left; position: fixed; padding: 0 25px 15px 0px; width: 525px;}
#button{
    float:right; margin: 5px -20px 0 0;
}
#button a {
    background:url(../images/button.png) 
    no-repeat;
    display:block; /* Necessary, since A is not a block element */
    width: 167px;
    height: 58px; 
}
#button a:hover {
    background:url(../images/buttonhover.png) no-repeat;
    width:167px;
    height:58px;
}
.right {float:right; margin: 0 0 5px 25px;}
#secondary-content {float: right; margin: 100px 0 15px 569px; background: rgba(128,127,128,0.9); padding: 20px; background: rgba(128,127,128,0.9); width:405px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}

谢谢你！

- TJ Chasteen

---

你能否创建一个 jsFiddle 或将你的 HTML 添加到问题中？ - j08691

Answer 1

overflow-x:hidden

这将禁止在元素上出现滚动条，并隐藏任何溢出的内容。

- Sam Sussman

---

这种方法仍允许在移动设备上进行水平滚动。 - EHerman

Answer 2

我希望我正确理解了你的问题，但为什么你可能不需要使用float呢？

Float是将元素向左或向右推动，我认为它非常方便，但对于你的解决方案，你不需要它。相反，你可以在secondary-content div上使用position: absolute。与使用margins不同，使用top、left更容易。因此，如果你想让你的secondary-content div处于正确的位置，你可以使用：

position: absolute;
top: 100px;
left: 569px;

我建议您对其他元素采取同样的做法，并使用边距来创建元素周围的空间。

- Willem