Question

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

目标

有2列布局，始终至少是整页高度，但如果是内容则会增长使然

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

问题

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

enter image description here

的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

让两列在同一高度的技巧非常经典。

你可以：

使用faux-columns技巧（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%修复它时，如果你有HD res例如 - 1080px - 就是这样。你坚持1080px这是100％的高度，但如果你离开,min-height: 100%那么我认为你得到至少1080p。

CSS - 列似乎没有内容增长

3 个答案: