html - 左列固定宽度，右列高度；右列流体宽度

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;
    }