Html 2列布局：div等于最长高度或视口高度

所以我一直在寻找我的难题的答案，我当然知道整个混乱的局面，有假柱和背景，溢出和负边缘，但要么我是瞎子，要么还没有人解决这个问题

情况很简单：

• 车身为100%宽度
• 我想要两列的布局
• 如果两列中的内容都小于视口高度，我希望两列都是视口的高度
• 如果任一列中的内容都比视口高度长，我希望两列的高度都是最长的

如果没有太多的CSS攻击，就没有办法解决这个问题吗？我并不十分在意向后兼容性（例如，我很乐意使用大众单位），只要网站不会在旧浏览器中完全崩溃

我会发布一些示例代码，但到目前为止，我只有六个文件，每个文件都测试一个流行的解决方案。最新的一款是使用大众：

HTML:

---

这解决了第一个视口高度问题，但没有解决第二个最长的列问题（如果用内容填充任一列，则该问题是可见的）。

纯CSS可以实现这一点。但是，它在IE7中不起作用，因为它需要使用

display:table

，而此演示使用的css视口单元在IE7/8中不起作用

• 将包装器元素设置为

  display:table

  ，并将两列设置为

  display:table cell

  意味着我们可以确保列的高度保持相等
• 定义

  min height

  对表格单元格不起作用，因此我们需要一个可以应用min height的内部div。一点额外的标记，但它解决了这个问题
• 内部内容div具有浏览器视口的最小高度。如果高度因css或内容而改变，则表列将增加

作为测试，我留下了一个注释的

height

样式，以便您可以看到它在滚动时的样子

html, body {
    margin:0;
    height:100%;
    width:100%; 
    overflow-y: scroll;
}
#wrapper {
    display: table;
    min-height: 100%;
    table-layout: fixed;

}
#wrapper>div {
  display: table-cell;
  min-height: 100%;
}
#wrapper>div:first-child {
    background:snow;
    width: 20vw;
}

#wrapper>div:last-child {
    background:teal;
    width: 80vw;
    height: 100%
}
#wrapper .content {
  min-height: 100vh;
  /*height: 2000px;*/
}

---

唯一的解决方案是使用javascript，实际上这应该可以通过组合使用

minheight

和

display:table

。让我试试小提琴

body {
    margin:0;     /* This is used to reset any browser-default margins */
    height:100vh; /* This is needed to overcome a Chrome bug. */
    width:100vw;  /* As above. */
}
div {
    height:100vh;
}
#left {
    background:snow;
    float:left;
    width: 20vw;
}

#right {
    background:teal;
    float:right;
    width: 80vw;
}

html, body {
    margin:0;
    height:100%;
    width:100%; 
    overflow-y: scroll;
}
#wrapper {
    display: table;
    min-height: 100%;
    table-layout: fixed;

}
#wrapper>div {
  display: table-cell;
  min-height: 100%;
}
#wrapper>div:first-child {
    background:snow;
    width: 20vw;
}

#wrapper>div:last-child {
    background:teal;
    width: 80vw;
    height: 100%
}
#wrapper .content {
  min-height: 100vh;
  /*height: 2000px;*/
}