設置一個div不影響滾動條

我有一個相當惱人的問題，我似乎無法找到一個簡單的修復。考慮下面的HTML：設置一個div不影響滾動條

<html> 
<body> 
    <div id="page"> 
     <!-- Some HTML here --> 
     <div id="menu"><!-- Some stuff here --></div> 
     <!-- Some HTML here --> 
    </div> 
</body> 
</html>

用下面的CSS：

body { 
    text-align: center; 
} 

#page { 
    margin: 0px auto; 
    max-width: 1200px; 
} 

#menu { 
    width: 100%; 
    padding: 0px 2000px; 
    margin-left: -2000px; 
}

這將使一個居中的頁面DIV，帶有菜單欄在那裏。事情是，只要瀏覽器寬度變成> 1200px，div就不會再增長，但菜單div必須一直延伸到窗口邊緣。現在這種方法的問題是，我得到一個水平滾動條，因爲菜單欄比屏幕大。所以，我正在尋找一個解決方案。禁用滾動條對水平滾動條產生影響的東西可以實現。然而，禁用水平滾動條不是一個選項，因爲內容必須可以在小設備上滾動以及...

我知道我可以通過拉動頁面div之外的菜單欄來解決這個問題，但是很難，因爲我正在編輯一個Drupal主題，我希望這個更改儘可能沒有影響。

在此先感謝您的任何建議！

來源

2014-11-03 rcijvat

你的意思是說，你想div一直保持100％的寬度，但有滾動的內部？如果是這樣，那麼你應該有一個更寬的div在主div內。喜歡的東西這個 -

<div id="full-width"> 
    <div id="scrolling-div"> 
    </div> 
</div> 

<style type="text/css"> 
    #full-width { 
     float:left; 
     width:100%; 
     height:500px; 
     overflow-x:visible; 
    } 

    #scrolling-div { 
     float:left; 
     width:300%; 
     height:500px; 
    } 
</style>

我測試此代碼，它的工作原理:)

來源

2014-11-03 11:35:45 Neit

感謝您的回覆。不，在菜單div內滾動是不必要的。此外，全寬div應該居中，我寧願全寬div不要設置爲絕對定位，因爲這會把現有的佈局搞砸。 – rcijvat 2014-11-03 12:16:12

你可以很容易通過設置你的HTML和車身造型像這樣解決這個問題：

html, body { 
    overflow-x:hidden; 
} 

body { 
    margin: 0; 
}

這應該做它與您現在的當前代碼。

來源

2014-11-03 11:56:58

感謝您的回覆，但正如我在帖子中提到的，水平滾動不應該完全禁用。 – rcijvat 2014-11-03 12:12:52

我不明白你的問題，你可以在下降到特定寬度時使用媒體查詢，然後再次移除溢出。剛剛發佈的代碼答案不會禁用內容的滾動條，內容仍然可以滾動 - 但不能擴展到窗口上。 – 2014-11-03 12:17:20

將無法工作，因爲每當水平滾動條變得可用時，由於我添加的瘋狂填充，它將滾動太多。小窗寬也是如此。而設計使用窗口滾動條，沒有div滾動條滾動內容，所以我真的需要這個窗口滾動條，但我只想菜單div對此窗口滾動條沒有任何影響。但我想這很難。 – rcijvat 2014-11-03 12:21:18

設置一個div不影響滾動條

回答

相關問題