CODEWITHSUNDEEP
htmlcsspositionalignment
Andrew.S
Andrew.S

Reputation: 149

How do I lock a sidebar to the height of a window even when a user scrolls?

I'm running into a minor issue with one of the elements on my page. I have a sidebar which I am attempting to have span the height of the page by using the following CSS:

#sidebar {
    width: 180px;
    padding: 10px;
    position: absolute;
    top: 50px;
    bottom: 0;
    float: left;
    background: #eee;
    color: #666;
}

The corresponding CSS is pretty much what you'd expect:

<div id="header">
    The header which takes up 50px in height
</div>
<div id="main-container">
    <div id="sidebar">
        The sidebar in question
    </div>
    <div id="main-content">
        The rest of my page
    </div>
</div>

The code works as expected for the most part. When the page renders it spans 100% of the height (minus the 50px from the top). The problem is that it essentially assigns the box to the exact height of the window so as I scroll down the box scrolls away instead of staying locked to the bottom of the window. Any ideas how to resolve this?

Upvotes: 0

Views: 1969

Answers (3)

Jahanzeb Khan
Jahanzeb Khan

Reputation: 440

First of all, I don't understand how it's spanning 100% of the height when no height has been defined.

Secondly use position: fixed instead of absolute.

On a second note, I'd like to recommend what seems a more proper way of going about positioning this. At the end of the main-container div, before it's closing tag, put this 

<div style="clear: both;"></div>

and make the main container also float left, or float right if that doesnt give you what you want. It's suprising how such a common layout can feel tricky to do properly. (at least for newbies like us). I might be wrong, this might not be a better way, but it's the way I'd do it. The extra div you add is so that floated divs take up space, apart from that if it doesn't work, give the sidebar a height of 100%, or if you think it will overflow, tell me I'll add to my answer.

Upvotes: 0

Vucko
Vucko

Reputation: 20834

You have to use position:fixed if you want for the sidebar to be fixed on some position:

#sidebar {
    width: 180px;
    padding: 10px;
    position: fixed;
    top: 50px;
    bottom: 0;
    background: #eee;
    color: #666;
}

JSFiddle

Another way would be to give to the parent container position:relative, and on his child position:absolute - but then the parent must have some height so the child element takes its height.

html,body{
    position:relative;
    height:100%; /* some height */
}

#sidebar{
    width: 180px;
    padding: 10px;
    position: absolute;
    top: 50px;
    bottom: 0;
    background: #eee;
    color: #666;
}

JSFiddle

Check learnlayout to read more about positioning.

Upvotes: 1

geevee
geevee

Reputation: 5451

use css position:fixed to make the sidebar fixed.

in order to lock the height according to screen height i would use javascript/jquery:

$(function(){
    // assign to resize 
    $(window).resize(set_height);
});

function set_height() {
    $('#sidebar_id').height($(window).height());
}

hope that helps

Upvotes: 0

Related Questions