固定尺寸左列和流体右列均具有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%的高度以获取整个屏幕高度时，其父级的高度应为{{1也是：

<强> CSS：

100%

<强> HTML：

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 */
}

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