如何使滾動條不被覆蓋

我有一個名爲BasePanel的基礎面板，其代碼無法更改。我有一個總是固定高度的酒吧，這個酒吧不是添加在BasePanel中，但它與BasePanel重疊。我還有一個名爲Container的面板，它被添加到BasePanel。 Panel Container應該在Bar下面。如何使滾動條不被覆蓋

現在我希望當窗口大小發生變化時，面板容器可以自動出現滾動條，我已經實現了但是有問題。問題是當我的窗口變小時，滾動條的部分將被覆蓋。我想知道我該如何解決這個問題？

BasePanel { 
    width: 100%; 
    height: 100%; 
    position:fixed; 
    font-family: 'Arimo'; 
} 


Bar{ 
    height: 41px; 
    width: 100%; 
    z-index: 9998; 
    position: fixed; 
    top: 0px; 
} 


.Container{ 
    width: 100%; 
    height: 95.570321151%; 
    top: 4.429678848%; 
    overflow: auto; 

}

如果我將容器的頂部設置爲百分比，滾動條的向上箭頭將被條形圖覆蓋。

.Container{ 
    width: 100%; 
    height: 95.570321151%; 
    top: 41px; 
    overflow: auto; 

}

如果我將容器的頂部設置爲41px，滾動條的向下箭頭將被覆蓋，因爲它沒有足夠的空間。

換句話說，我想知道如何讓Panel Container始終從頂部41px開始，無論窗口大小如何改變，Container都不會從BasePanel溢出，因此滾動條將不會被覆蓋（記住酒吧不在BasePanel中）？

enter image description here

來源

2014-07-23 diane

看看了'@ media' CSS查詢做造型根據窗口大小http://css-tricks.com/ css-media-queries/ – Adjit

我檢查媒體查詢，但我不確定它們如何應用於我的案例。它提供了什麼時候大小是一些價值或某些價值之間，會發生一些事情。我的問題是當窗口大小變小時，面板容器將溢出並且部分滾動條會被覆蓋。你能告訴我如何使用媒體qurey來解決這個問題嗎？ – diane

我弄清楚如何做到這一點。只需使用calc（）函數來設置容器面板的高度。

如鈣（100％ - 41px）

來源

2014-07-24 18:45:53 diane

如何使滾動條不被覆蓋

回答

相關問題