如何啓用滾動而不是壓縮div一起

在我的網站上它是一個基於div的佈局，當窗口被重新整理時，所有內容都被壓在一起。例如圖像重疊或移動到彼此之下，div也彼此重疊。如何啓用滾動而不是壓縮div一起

當div的內容大於窗口大小時，我該如何獲得它的滾動，類似於facebook，如果你調整窗口的大小，它可以防止任何重疊，只是讓用戶滾動？

body 
{ 
    background-color: #B0B0B0; 
    color: #ffffff; 
    margin-top: 0px; 
    margin: 0px;   
} 

#header 
{ 
    width: 100%; 
    height: 100px; 
    margin: 0px; 
    padding: 0px; 
} 

#content 
{ 

    width: 80%; 
    height: 800px; 
    margin-top: 50px;  
    margin-left: auto; 
    margin-right: auto; 
    padding: 30px;  
} 

<div id="header"> 
[Header] 
</div> 
<div id="content"> 
[Content] 
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" /> 
</div>

的HTML是這樣的，但顯然有更多的內容

希望我沒有做這個太混亂了，謝謝。

來源

2010-10-18 Elliott

風格

overflow: scroll;

添加到#content

來源

2010-10-18 15:52:50 Brad

我剛剛添加了這個，但它顯示滾動條之前它被調整大小，並且它也不水平滾動。謝謝。 – Elliott 2010-10-18 15:56:29

@Elliot，嘗試'overflow-x：scroll;溢出 - Y：滾動;'你是什麼意思的「調整大小」？ – Brad 2010-10-18 16:01:20

調整瀏覽器窗口的大小。我試過了，它沒有任何區別，我想在任何開始重疊之前啓用滾動。在Facebook上，您只能在滾動開始之前將窗口重新調整到某個特定點。再次感謝。 – Elliott 2010-10-18 16:03:26

使用overflow:scroll;，使在資料覈實

來源

2010-10-18 15:54:00

謝謝，但我希望整個頁面滾動不只一個div。 – Elliott 2010-10-18 15:59:31

@Elliott - 在這種情況下嘗試溢出：自動;或添加溢出：滾動在CSS中的正文類。 – 2010-10-18 16:00:35

我相信滾動你可能想overflow: auto;

auto和scroll之間Here's a comparison。

來源

2010-10-18 15:59:30 DOK

只需將overflow:auto;添加到您的div。

您也可以使用下面的，如果你只想x或y滾動

overflow-x:auto;

或

overflow-y:auto;

來源

2010-10-18 16:02:17

您必須添加white-space:nowrap;你的身體標記。

來源

2010-10-18 16:16:41 Tae

這種方法很有用，儘管當它的全尺寸和全部內容都是一行時我必須滾動。 – Elliott 2010-10-18 16:23:59

如果您忘記了空白屬性並替換寬度，會發生什麼情況：70％;最大寬度：70％;在#content元素中？ – Tae 2010-10-18 22:56:18

這個答案很晚，但是我偶然發現了這個問題，因爲我在其中一個頁面上發生了問題，我在這個頁面中有30個奇數的各種類型的輸入，它們被分成兩個表格。我無法滾動查看頁面底部的大約10個左右的輸入，並且在調整瀏覽器寬度時甚至無法從左向右滾動。

什麼解決我的問題是：

html, body { 
    overflow: visible; 
    }

這激活了我的X和Y滾動條。

我的頁腳在滾動時沒有調整，而是在滾動前停留在固定位置。這是由於我的主CSS將頁腳的位置設置爲絕對。簡單的解決，只需在頁面創建一個新的風格元素，並添加

footer { 
     position: fixed; 
     min-width: 100%; 
    }

我希望這可以幫助任何人尋找一個解決方案。

來源

2016-10-07 18:10:30 user3726345

如前所述通過user3726345，用最好的選擇是

html,body { 
overflow: visible; 
}

使用

overflow: auto;

dosnt提供最佳的輸出。那麼您可以根據自己的口味進一步調整頁腳代碼。

來源

2018-01-11 16:52:32 Christopher

如何啓用滾動而不是壓縮div一起

回答

相關問題