Search code examples
cssheightequalsviewportsidebar

Floated Sidebar: How to get sidebar full height of window?

I know that there will be people that may ask for the full code, but I'm just asking in a very general sense.

Say, I have the main content floated to the left with no fixed height and the sidebar floated to the right. I want the sidebar to take up the full height of the browser window even when the main content grows in length.

The container of the main content and sidebar also has no fixed height:

#container {
margin: 0 auto;
padding: 0;
max-width: 1024px;
position: relative;
background: url(../img/booksbg.jpg) fixed;
background-size: cover;
overflow: hidden;
}

How can I do this? The site is responsive with media queries.

I have tried:

sidebar {
height: 100vh; 
}

but that doesn't seem to work with the sidebar.

Solution

  • Giving position:absolute; and 100% height to the sidebar will do. http://jsfiddle.net/07zLb3xx/

    #sidebar {
    height: 100%;
    position: absolute;
    right: 0;
}

    If you have problems with the sidebar going out of the parent wrapper, give position:relative; to the parent wrapper like this http://jsfiddle.net/07zLb3xx/1/