左列固定宽度，右列高度;右柱流体宽度

Question

我正在尝试创建一个双列网站，左列是固定宽度，但它是我正在努力的高度。高度应该是窗口的高度或右侧列的高度（以较高者为准）。

使用我当前的解决方案，当右列高于浏览器窗口并向下滚动时，左列会被切断。

HTML

<div class="side-container">
  <!-- left side -->
  <aside>Left: Fixed width, 100% height of the window or right hand content</aside>
  <!--
  main content -->
  <article>Right: Fluid width</article>
</div>

CSS

.side-container {
  height:100%;
}
.side-container {
  margin: 0;
  padding: 0;
  padding-right: 200px;
  background: rgb(202, 147, 147);
}
aside {
  float: left;
  width: 200px;
  background-color: #e0e0e0;
  height: 100%;
  position: absolute;
  background-color: #e0e0e0;
}
article {
  margin: 0 0 0 200px;
  width: 100%;
  background-color: fuchsia;
  background-color: fuchsia;
}

Fiddle

Answer 1

您真正需要的只是在某些地方使用min-height代替height：

http://jsfiddle.net/t3AxY/3/

html, body {
    min-height: 100%;
}

.side-container{
    min-height:100%;
    }

.side-container {
    margin: 0;
    padding: 0;
    padding-right: 200px;
    background: rgb(202, 147, 147);
    }

aside{
    float: left;
    width: 200px;
    background-color: #e0e0e0;
    min-height: 100%;
    background-color: #e0e0e0;
    }

article {
    margin: 0 0 0 200px;
    width: 100%;
    background-color: fuchsia;
    }