滾動條僅在一個div上而不在整個主體上

Question

我有一個問題，我正在為一個朋友創建一個網站，他想要一個卧式一頁的網站，但是我有一個問題，我想要創建一個這樣的頁面，如果頁面長於屏幕，則可以垂直滾動頁面，但我希望滾動條位於div中，而不要覆蓋整個正文內容。

我快速創建了圖像，這就是滾動條的含義。 如果在這一刻，如果一頁紙的長度比另一頁紙的長度長，則其他所有頁紙的高度都相同。

圖片：

實時示例： http ： //onepage.ringocontent.com/

實時示例是我在上面描述的方式，如果只有一頁的高度溢出，則所有頁面的高度都相同。

Answer 1

我認為您在這里尋找的是元素的溢出屬性。 特別是溢出y。

如果你申請

overflow-y: auto;

到#page div時，當且僅當其中包含超出div高度的內容時，您才會在該div中獲得滾動條。

如果您在頁面的右側看到滾動條，則將div #page的高度設置得太高，請嘗試減小該div的高度，直到滾動條消失。

Answer 2

將其添加到樣式表應該可以解決問題：

<style> 
    #home, #blog, #info, #contact { 
        overflow-y: scroll; 
        height: 500px; 
    } 
    #page { 
        height: auto; 
    } 
</style>