CSS - 如何防止水平滚动？

这个问题可能有一个简单的解决方案。CSS - 如何防止水平滚动？

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

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

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

但是，当屏幕水平过小时，用户可以左右滚动并将第二列全部移动，甚至在我的固定第一列下方。这是我想要阻止的。

如何获得第二列垂直滚动但不能水平移动？

这里的CSS的snipet：

#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;}

谢谢！

来源

2012-11-13 TJ Chasteen

你可以创建一个jsFiddle或添加你的HTML到你的问题？ – j08691

overflow-x:hidden

这将不允许元素上的滚动条和隐藏任何东西悬挂在上面。

来源

2012-11-13 20:41:26

使用此方法仍然允许在移动设备上进行水平滚动 – EHerman

我希望我能理解你的问题，但你为什么不需要使用float。

浮点是向左或向右推一个元素，我认为它非常方便，但对于您的解决方案，您并不需要它。相反，您可以使用您的次要内容div位置：绝对。不使用边距，使用顶部，左边更容易。所以，如果你想在正确的地方您的辅助内容的div你可以使用：

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

我建议你做其他的元素和使用利润率在你的元素创造的空间是相同的。

来源

2012-11-13 21:01:39 Willem

CSS - 如何防止水平滚动？

回答

相关问题