Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fixed size left column and fluid right column both with 100% height

I'm looking to construct a two-column layout with a fixed left column and a fluid right, both with 100% height, like this example:

enter image description here

I've tried so many variations I can't remember what I've tried now, and just can't get it to look right. I've also tried looking at websites such as LayoutGala but they don't have any example with both columns having a 100% height.

I can't remember what I have tried already but this was definitely my last attempt. I know this because this was the last visited web page before I was arrested for throwing a computer monitor from the fourth floor of an apartment block.

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 here:

MyFiddle

I'm so used to my 960 wide centered website, that when it came to a full screen fluid layout, it completely threw me. Any help greatly appreciated.

like image 382
TheCarver Avatar asked Aug 24 '13 22:08

TheCarver


2 Answers

First, you need to fix right-columnr typo, Second: when you set a height of 100% on a element to take the entire height of screen, its parent should have a height of 100% too:

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

like image 68
Hashem Qolami Avatar answered Nov 09 '22 06:11

Hashem Qolami


IF You really want your columns to have 100% height then You must set 100% height on body and html elements.

This 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/

like image 34
HankMoody Avatar answered Nov 09 '22 06:11

HankMoody