1

I have got a site with a simple navigation at the bottom. That navigation has a fixed height of 100px at the left:

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

now, i want to fade-in a box when a specific button is clicked. That box should reach from the top of the document to the beginning of the nav. How do i achieve this, as i have a fixed height of the navigation, but a dynamic height of the box?

My personal workaround is the following script:

(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
    });
});

}());

But that seems just wrong to me, i would like to know if there is any better way to do this, maybe with pure CSS.

Here is a fiddle to show the problem, solved with the solution mentioned above:

JSFiddle

Thank you in advance

2 Answers 2

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;
}

I set the height of treeMenu to 100% and added a padder-div inside.

Basically you let the additional 100px overlap at the top.

0

Is there another solution?

I used this, but in case there is a content-overflow, it causes the scrollbar to move upwards.

Here is a screenshot of the issue:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.