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，注意它必须比大的数最高列的高度），并删除具有负边界的额外空间。但高度较低的列将获得高度（实际上，它是填充的一部分）。

Answer 2

查看更新示例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 - 就是这样。你坚持1080像素，这是100％的高度，但如果你离开它,min-height: 100%那么我认为你至少得到1080p。

Answer 3

使两列在同一高度的诀窍是非常经典的。

您可以：

• 使用人造列绝招（http://alistapart.com/article/fauxcolumns）
• 使用的CSS更现代的表格布局（使用显示：表，显示：表行，显示：表 - cell）