固定大小的左列和流体右列均具有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％的高度，那么您必须在body和html元素上设置100％的高度。

这工作：

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%} 

编辑：

演示基于您的代码：http://jsfiddle.net/YL8Eh/