CSS - 列似乎没有随着内容增长

Question

我正在努力掌握 CSS（这是我过去试图避免的开发方面的一个方面），但我无法理解这里发生的事情。

目标

• 具有 2 列布局，始终至少为整页高度，但如果内容会增加 规定

编辑：两列的高度也应该相等，即都长到最大。

问题

当内容小于一页时，它会按照我的意图保持全高。然而，在像下面的小提琴这样的情况下，内容比页面长，而页面滚动时，背景不会随着内容流动。

JSFiddle http://jsfiddle.net/tDSAg/

HTML

<header>
    <div class="header-inner">Header</div>
</header>
<div id="outer">
<div class="col1">
    <p>Start</p>
    <p>Col1</p>
    <p>End</p>
</div>
<div class="col2">
    <p>Start</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>End</p>
</div>

CSS

html, body
{
    height: 100%;
}

#outer
{
    min-height: 100%;
    background-color: red;
    height: 100%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.col1
{
    background-color: green;
    width: 220px;
    float: left;
    min-height: 100%;
    height: 100%;
    margin-right: 10px;
}

.col2
{
    background-color: aliceblue;
    width: 770px;
    float: left;
    min-height: 100%;
    height: 100%;
}
header {
   background-color: orange;
}
.header-inner {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

请注意，这个答案只是一个适用于旧浏览器的技巧，但现在正确的做法是使用display: table-cell，就像其他人回答的那样。

---

您可以使用以下技巧：

#outer {
    min-height: 100%;
    overflow: hidden;
}
.col {
    margin-bottom: -10000cm;
    padding-bottom: 10000cm;
}

Demo

该技巧为所有列设置了一个大的填充（在本例中为10000cm，注意它必须是一个大于最高列的高度的数字），并以负边距删除多余的空间。但是高度较小的列会增加 height（实际上，它是填充的一部分）。

Answer 2

让两列高度相同的技巧是一个非常经典的技巧。

您可以：

• 使用假列技巧 (http://alistapart.com/article/fauxcolumns)
• 通过 css 使用更现代的表格布局（使用 display: table、display: table-row、display: table-cell）

Answer 3

查看更新后的示例here。老实说，我也只是想了解有关CSS 的知识，所以我无法给你很好的解释，但可以肯定的是，这里：

.col1 {
    background-color: green;
    width: 220px;
    float: left;
    min-height: 100%;
    height: 100%;
    margin-right: 10px;
}

您应该只留下min-height。我也做了一些其他的更改，但不知道它们是否有任何影响。这很棘手 - height: 100% 我也有这样的印象，不管怎样，这实际上保证了 100% 的内容高度，但最近我玩了一点，它似乎根据屏幕高度计算了 100%当你用height:100% 修复它时，如果你有高清分辨率 - 1080px - 就是这样。你被 1080px 困住了，它是高度的 100%，但如果你离开它,min-height: 100%，那么我认为你至少得到 1080p。