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

设置固定div的高度（响应）

2 个答案: