固定大小的左列和流体右列都具有 100% 高度答案

【问题标题】：Fixed size left column and fluid right column both with 100% height固定大小的左列和流体右列都具有 100% 高度
【发布时间】：2013-08-27 17:30:00
【问题描述】：

我希望构建一个两列布局，左列固定，右列流动，高度均为 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 宽居中的网站，当谈到全屏流畅布局时，它完全让我感到震惊。非常感谢任何帮助。

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

如果您确实希望列的高度为 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/

【讨论】：

该解决方案没有多大帮助，因为您将溢出设置为隐藏？ jsfiddle.net/r61zvuk7

【解决方案2】：

首先，您需要修正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

【讨论】：