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 - 如何防止水平滾動？

回答

相關問題