Geek asks and answers

CSS: sidebar 100% height without scroll

I need a sidebar that occupies the entire height of the screen and does not change when scrolling down.

Therefore, when I view only content changes, but navbar remains unchanged.

I made the first example: http://jsfiddle.net/CwSD6/

But functionality without scrolling is missing ...

Hi

EDIT: You need to use the position: fixed and top, bottom, left with a value of 0. http://jsfiddle.net/CwSD6/1/

+5
source share
3 answers

this can be done by doing position: fixed;in<aside>

see this jsfiddle script

+7
source

Try the following:

aside
{
    position: fixed;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid #111;
}

Hope this helps

+3
source

jQuery, . 990 , , , .

$(window).resize(function() {
    var doc_height = $(document).height();
    var doc_width = $(document).width()
    if (doc_width > 990) {
        $('#sidebar').css("height", doc_height);
    } else {
        $('#sidebar').css("height", 'auto');
    }
});

Although this may not be the most efficient way, you do not need to set variables. I believe this helps with readability.

Regards, M

0
source

More articles:


All Articles