Html 左栏定宽，右栏定高；右列流体宽度

我正试图创建一个两栏的网站，左边的栏是固定宽度的，但这是我正在努力解决的高度。高度应为窗的高度或右侧立柱的高度（以较高者为准）

在我当前的解决方案中，当右栏高于浏览器窗口时，向下滚动，左栏将被截断

HTML

---

在某些地方，您真正需要的是使用

min height

而不是

height

：

---

考虑使用推特引导程序，他们有解决方案。谢谢你。尼科拉金科维奇，我来看看他们是怎么做到的。不过，我真的不想因为这个原因而使用整个框架。好吧，我和你一样，在发现Bootstrap之前…：）@Nikolanikovic Bootstrap似乎不符合我在主要问题中提出的要求。左列的列高度不是浏览器的100%。JSFIDLE对我来说不适用，左边的灰色列不是窗口高度的100%。它对你有用吗？奇怪，它对我有用（歌剧）。我通常不会遇到Opera可以工作的情况，但Chrome/Firefox/等却不行。这里有一个替代解决方案，它在Opera中似乎只具有所需的外观：

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

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

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