html – 固定尺寸左列和流体右列均具有100％高度

我正在寻找构建一个两列布局,左侧固定列和右侧流体,两者都具有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宽中心网站,当它出现在全屏幕流体布局时,它完全让我感动.任何帮助非常感谢.

解决方法

首先,您需要修复右列拼写错误,第二种：当您在元素上设置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