Question

所以我一直在拖网寻找我的难题的答案，我当然知道整个混乱的人造柱和背景以及溢出和负边缘，但我或者是盲人或者没有人解决过这一个。

情况非常简单：

身体宽100％。
我想要一个双栏布局。
如果两列中的内容都小于视口高度，我希望两列都是视口的高度。
如果任一列中的内容长于视口高度，我希望两列都是最长的列。

如果没有太多的CSS黑客，有没有办法解决这个问题？我不会非常注意向后兼容性（例如，我很乐意使用vw单位），只要该网站在旧浏览器中完全不会崩溃。

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

HTML：

<div id="left">Left</div>
<div id="right">Right</div>

CSS：

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

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

Answer 1

纯CSS可以实现。但是，它在IE7中不起作用，因为它需要使用display: table，并且此演示使用在IE7 / 8中不起作用的css视口单元。

CodePen demo

将包装器元素设置为display: table，将两列设置为 display: table-cell表示我们可以确保列的高度保持相等
定义min-height对表格单元格不起作用，因此我们需要一个内部div，我们可以将min-height应用于。一些额外的标记，但它解决了这个问题。
内容内容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;*/
}

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

1 个答案: