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）