雙滾動條調整大小與最大化和恢復瀏覽器窗口

我有一個標題，內容和頁腳。

現在頁眉和頁腳有一個固定的高度，並始終在屏幕上。

CSS的頁腳和頁眉：

#footer { 
    background-color:#e6e6e6; 
    width:100%; 
    height:46px; 
    bottom:0; 
    left:0; 
    position:fixed; 
    border-top:1px solid #7F8C8D; 
    z-index:101; 
} 


#header { 
    border-bottom:1px solid black; 
    height:45px; 
    background-color:#828282; 
    color:#FFF; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    z-index:105; 
    width:100%; 

    box-sizing:border-box; 
}

至於內容，我有以下幾點：

#content { 
    background: #9cbbe3 url(../img/backgr.gif) repeat-x; 
    right:0; 
    left:0; 
    background-size:auto; 
    position: absolute; top: 0px; bottom: 0px; 
    overflow: auto;  
}

現在這個作品！起初...

但是，然後我去最大化和最小化窗口，我最終有兩個滾動條。當我刷新頁面問題已修復。並根據我的注意力重新調整大小。但是當最大化和恢復窗口時，我最終得到兩個滾動條。

我該如何解決這個最好使用CSS？

來源

2013-07-08 Nick V

也許這個作品出來你：

html, body { overflow: hidden; }

來源

2013-07-08 13:23:48 LinkinTED

對不起，它似乎是我想的某種緩存問題。由於某種原因，現在所有的工作。清理緩存足夠多次，但這次我刪除了我所擁有的所有東西，這就是訣竅。我的錯。儘管我還剩下幾頁，但它在整個頁面上不停地給我一個滾動條，當它不是neccesairy時就解決了這個問題。所以我會標記它，因爲它可能會幫助一些人擺脫第二個滾動條。 –

試着改變你的overflow

overflow: auto;

到：

overflow: hidden;

來源

2013-07-08 13:22:16 Stefan

嗨，這解決了雙滾動條然而滾動條現在似乎越過頁眉和頁腳，而不僅僅是在內容最大化時 - >恢復窗口。刷新後滾動條只出現在我想要的內容中。所以這解決了雙滾動條問題，但滾動條在錯誤的地方。 –

@NickV，js與你的代碼一起學習會非常有幫助！ – Stefan

對不起，調整錯誤的CSS我得到以下結果：當最小化 - >最大化這會導致滾動條上顯示頁眉和頁腳。刷新時會導致滾動條完全消失。也是的jsFiddle確實有用，但我想知道如果沒有一個乾淨的CSS解決方案，這個問題。 –

雙滾動條調整大小與最大化和恢復瀏覽器窗口

回答

相關問題