8

我正在寻找构建一个具有固定左列和流动右列的两列布局，两者都具有 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>

这是这里的结果：

我的小提琴

我已经习惯了我的 960 宽居中的网站，当谈到全屏流畅的布局时，它完全让我震惊。非常感谢任何帮助。

4

2 回答 2

9

首先，您需要修复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 演示

于 2013-08-24T22:12:39.250 回答
3

如果您真的希望列的高度为 100%，那么您必须在元素body上设置 100% 的高度。html

这有效：

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/

于 2013-08-24T22:10:04.673 回答