CSS：滾動條在窗口下方開始幾個像素

我希望我的標題得到修復：標題始終位於頁面頂部，並且可以滾動我的全部內容（包括頁腳的所有內容）。標題爲60px，因爲您可以在下面看到它，而不是將它固定在頂部的問題。CSS：滾動條在窗口下方開始幾個像素

我想解決的問題（僅使用CSS）是從上面60個像素開始的滾動條。 如您所見，滾動條的底部（2.箭頭）實際上是隱藏/向下移動的。我想我的問題60px。因此，它是這樣的：

scrollbar

HTML：

<!DOCTYPE html> 
<head> 
... 
</head> 

<body> 
    <header> 
     ... 
    </header> 

    <div id="content"> 
     ... 
    </div> 
</body> 
</html>

CSS：

html, body { 
    height: 100%; 
} 

body { 
    background: #d0d0d0; 
    overflow-y: hidden; 
} 

header { 
    background: #fff; 
    height: 60px; 
    width: 100%; 

    position: fixed; 
    top: 0; 
} 


#content { 
    margin-top: 60px; 
    height: 100%; 
    width: 100%; 

    overflow-y: scroll; 
}

什麼我在我的CSS缺失？謝謝你們。

// 編輯爲這裏的抗凍答案回覆（約翰·格雷）

評論您的評論如下：

scrollbar_2

來源

2012-11-02 Nolog Lester

這裏是一個jsfiddle如何解決你的公關oblem： http://jsfiddle.net/sTSFJ/2/

這裏是CSS：

html, body { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 

#wrapper { 
    width: 100%; 
    height: 100%; 
    margin: auto; 
    position: relative; 
} 

#header { 
    height: 40px; 
    background-color: blue; 
    color: #fff; 
} 

#content { 
    position:absolute; 
    bottom:0px; 
    top: 40px; 
    width:100%; 
    overflow: scroll; 
    background-color: #fff; 
    color: #666; 
}

來源

2012-11-02 10:45:24

它幾乎是完美的。現在我需要將我的標題放在滾動條上方 - 尤其是影子。它（這4px的影子）應該在滾動條上方。使用z-index：5; in header {}和z-index：-1;在＃內容不起作用。看這個： http://jsfiddle.net/jBfwY/ –

這個解決方案有問題，因爲需要事先知道標題的高度。 –

你的＃內容高度等於體高，但你有一個標題所以...嘗試使用此：

html, body { 
    height: 100%; 
} 

body { 
    background: #d0d0d0; 
    overflow-y: hidden; 
} 

header { 
    background: #fff; 
    height: 5%; 
    width: 100%; 

    position: fixed; 
    top: 0; 
} 


#content { 
    margin-top: 5%; 
    height: 95%; 
    width: 100%; 

    overflow-y: scroll; 
}

來源

2012-11-02 10:16:12

謝謝，但沒有。我已經試過了，它只適用於特定的窗口高度。看看這個：約。 300px vs 900px瀏覽器窗口的高度（檢查我的第一篇文章中的第二張圖片） –

您可以使用計算的財產解決這個問題。這是不是高度95％，因爲你不知道是否5％== 60px而是做以下事情： -

#content { 
    margin-top: 5%; 
    height: calc(100%-60px); 
    height: -webkit-calc(100%-60px); /*For webkit browsers eg safari*/ 
    height: -moz-cal(100%-60px); /*for firefox*/ 
    width: 100%; 
    overflow-y: scroll; 
}

來源

2017-11-08 11:50:08

CSS：滾動條在窗口下方開始幾個像素

回答

相關問題