Dimensione fissa colonna a sinistra e fluido colonna di destra sia con il 100% dell'altezza

Question

sto cercando di costruire un layout a due colonne con una colonna di sinistra fissa e destra fluido, sia con il 100% di altezza, come in questo esempio:

Ho provato così tante varianti che non riesco a ricordare cosa ho provato ora, e non riesco a farlo sembrare giusto. Ho anche provato a consultare siti come LayoutGala ma non hanno alcun esempio con entrambe le colonne con un'altezza del 100%.

Non riesco a ricordare cosa ho già provato ma questo è stato sicuramente il mio ultimo tentativo. Lo so perché questa era l'ultima pagina web visitata prima che venissi arrestato per aver lanciato un monitor del computer dal quarto piano di un condominio.

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> 

Questo è il risultato qui:

MyFiddle

Sono così abituata al mio sito web 960 ampia centrata, che, quando si è trattato di un layout completo fluido schermo, completamente mi ha buttato. Qualsiasi aiuto molto apprezzato.

Answer 1

In primo luogo, è necessario fissare right-columnr errore di battitura, Secondo: quando si imposta un'altezza di 100% su un elemento per occupare l'intera altezza dello schermo, il suo genitore dovrebbe avere un'altezza di 100% anche:

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

SE VUOI davvero che le colonne abbiano il 100% di altezza, allora devi impostare l'altezza del 100% sugli elementi body e html.

Questo funziona:

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 sulla base di codice: http://jsfiddle.net/YL8Eh/