Фиксированный размер левой колонны и жидкостной правой колонны как со 100% высотой

Question

Я ищу, чтобы построить двухстоечный макет с фиксированным левым столбцом и жидкостью справа, оба со 100% высотой, как этот пример:

Я пробовал так много вариантов, я не могу вспомнить, что я пробовал сейчас, и просто не могу заставить его выглядеть правильно. Я также пробовал просматривать такие сайты, как LayoutGala, но у них нет ни одного примера с обоими столбцами, имеющими высоту 100%.

Я не могу вспомнить, что я уже пробовал, но это была моя последняя попытка. Я знаю это, потому что это была последняя посещаемая веб-страница, прежде чем меня арестовали за то, что она бросила компьютерный монитор с четвертого этажа жилого дома.

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> 

Это результат здесь:

MyFiddle

Я так привык к моему 960 широко центрированному сайту, что когда он пришел в полный макет экрана жидкости, он полностью бросил меня. Любая помощь очень ценится.

Answer 1

Во-первых, вам нужно исправить right-columnr опечатку, Во-вторых, когда вы установили высоту 100% на элементе, который занимает всю высоту экрана, его родитель должен также иметь высоту 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

ЕСЛИ Вы действительно хотите, чтобы ваши столбцы имели высоту 100%, тогда вы должны установить высоту 100% на body и html элементов.

Это работает:

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 на основе вашего кода: http://jsfiddle.net/YL8Eh/