设置固定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