創建兩個浮動div 100％高度

我試圖創建一個並排div有100％的高度，我設法得到第一個div工作，但第二個是導致問題，一直試圖在過去的3個小時內這樣做。創建兩個浮動div 100％高度

#mainWrapper{ 
    width: 900px; 
    margin:0px auto; 
    background:#fff; 
} 

/*leftColumn */ 
.leftColumn { 
    float:left; 
    width:250px; 
    height:100%; 
    background:#fafafa; 
    border-left:solid 1px #dedede; 
    position:fixed; 
    top:0px; 
} 

/* Content */ 
.mainContent { 
    float: left; 
    width: 650px; 
    height:100%; 
    background:#fff; 
    margin-left:252px; 
    padding-bottom: 50px; 
}

例如它是如何應該看起來像 http://i49.tinypic.com/ycef7.jpg

它的外觀像此刻。（什麼都試過不知道如何解決它） http://i49.tinypic.com/2ryk5eo.png

來源

2012-08-17 user1509217

添加

html, body { 
    height: 100%; 
}

（http://jsfiddle.net/zYWjJ/2/）

來源

2012-08-17 16:05:57

你撥弄不起作用。您的解決方案並不完全是.. #mainWrapper也必須有100％的高度，但如果mainContent的主體延伸超過頁面的高度，它的背景將停止當您向下滾動。 – 2012-08-17 16:09:13

你的小提琴鏈接似乎被打破。 – j08691 2012-08-17 16:09:17

鏈接正在工作。 – 2012-08-17 16:10:41

而不是給予明確的高度於內部的div向左浮動，你應該在家長的div使用overflow:hidden;，E-G：

#mainWrapper{ 
    width: 900px; 
    margin:0px auto; 
    background:#fff; 
    overflow:hidden; 
}

來源

2012-08-17 19:37:24 defau1t

創建兩個浮動div 100％高度

回答

相關問題