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