設置固定div的高度（響應）

Question

我有一個網站，底部有一個簡單的導航。這導航具有在左邊的100px的固定高度：

.mainNavigationWrapper{ 
position: fixed; 
bottom: 0; 
left: 0; 
width: 100%; 
height: 100px; 
} 

現在，我想淡入在一個盒子裏點擊一個特定的按鈕時。該框應該從文檔的頂部到達導航的開頭。我如何實現這一點，因爲我有一個固定的導航高度，但箱子的動態高度？

我個人的解決方法是下面的腳本：

(function() { 

var height = $(window).height() ; 

console.log(height) ; 
height = height - 100 ; 

$('.treeMenu').css({ 
    'height': height 
}); 

$(window).resize(function(){ 
    var height = $(window).height() ; 

    console.log(height) ; 
    height = height - 100 ; 

    $('.treeMenu').css({ 
     'height': height 
    }); 
}); 

}()); 

，但似乎只是我錯了，我想知道是否有任何更好的方法來做到這一點，也許用純CSS。

這裏是顯示該問題的小提琴，與解決方案上面提到的解決：

JSFiddle

預先感謝您

Answer 1

http://jsfiddle.net/PpDQh/

.treeMenu{ 
overflow-y: auto; 
position: fixed; 
top: -100px; 
background: rgba(18, 24, 18, 0.86); 
width: 15em; 
height: 100%; 
} 
.padder { 
padding-top: 100px; 
} 

我設定的高度treeMenu到100％，並在裏面添加padder-div。

基本上，你讓額外的100px重疊在頂部。

Answer 2

還有其他解決方案嗎？

我用這個，但萬一有內容溢出，它會導致滾動條向上移動。

這是問題的一個截圖：

http://sprottenwels.net/drive/sc.png