Fixed size left column and liquid right column with a height of 100%

Question

I want to build a two-column layout with a fixed left column and liquid on the right, both with a height of 100%, like this example:

I tried so many variations, I can’t remember what I tried now, and just can’t make it look right. I also tried looking at sites like LayoutGala , but they have no example where both columns are 100% high.

I can’t remember what I already tried, but it was my last attempt. I know this because it was the last web page visited before I was arrested for choosing a computer monitor from the fourth floor of a residential building.

body { margin:0; padding:0; } .left-column { position:absolute; top:0; width:235px; height:100%; background:#090909; } .right-column { margin-left:235px; background:yellow; height:100%; width:100%; } <div class="page-wrapper"> <div class="left-column"></div> <div class="right-columnr"> sd </div> </div> 

This is the result:

Myfiddle

I'm so used to my large 960-center website that when it came to the full-screen layout, he completely abandoned me. Any help was greatly appreciated.

Answer 1

First, you need to fix right-columnr typo, Second: when you set the height to 100% for an element, to take the whole height of the screen, its parent should also have a height of 100% :

CSS

 html, body { height: 100%; width: 100%; padding: 0; margin: 0; } .page-wrapper { height: 100%; position: relative; } .left-column { position:fixed; /* <-- fixes the left panel to prevent from scrolling */ top:0; left:0; width:235px; height:100%; background:#090909; } .right-column { margin-left:235px; background:yellow; min-height:100%; /* <-- fixes the background-color issue when content grows */ } 

HTML:

 <div class="page-wrapper"> <div class="left-column"></div> <div class="right-column"> This is the content. </div> </div> 

Jsbin demo

Answer 2

IF you really want your columns to be 100% high, then you should set 100% height on the body and html elements.

It works:

 html {height: 100%} body {height: 100%} .page-wrapper {height: 100%} /* This element is redundant unless You know You will need it in future for something */ .left-column {float: left; width: 235px; height: 100%} .right-column {overflow: hidden; height: 100%} 

Edit:

Demo based on your code: http://jsfiddle.net/YL8Eh/