使用CSS的100％列高度

-1

我正嘗試使用CSS創建一個完整高度的列，但我有一個噩夢！使用CSS的100％列高度

我可以管理它的唯一方法是將背景圖像應用於垂直重複的主體標籤，但缺點是我無法使用列寬的百分比。

我認爲最簡單的方法來演示我的問題是將它張貼在JSFiddle上，看看這裏有人能幫忙嗎？

html, body { 
    height: 100%; 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.sidebar { 
    background-color: black; 
    color: white; 
    float: left; 
    width: 20%; 
    min-height: 100%; 
} 

.canvas { 
    background-color: grey; 
    width: 80%; 
    float: right; 
}

感謝，

史蒂芬。

來源

2013-06-28 smclintock

這是否有什麼瀏覽器是兼容的？ – Pete

幾乎沒有任何CSS問題已經在網上討論過了...... http://www.google.com/search?q=css+equal+height+columns – CBroe

IE9，IE10，Safari 5＆6，Firefox和Chrome（當前版本）。 CBroe - 如果我找到了一個我不會在StackOverflow上發佈的解決方案，我已經有了Google。 – smclintock

有對此沒有非常好的解決方案仍然是誠實的，但你可以使用表單元格的CSS屬性。通過大家不招人喜歡，但它確實有很好的瀏覽器的支持和工作原理：

http://jsfiddle.net/VR9Bg/

.sidebar { 
    background-color: black; 
    color: white; 
    width: 20%; 
    height: 100%; 
    display: table-cell; 
} 

.canvas { 
    background-color: grey; 
    width: 80%; 
    height: 100%; 
    display: table-cell; 
} 

.wrapper { 
    display: table; 
}

來源

2013-06-28 09:25:12 user319940

+1如果你沒有擊敗我，那麼這將是我的原始解決方案！ – Pete

謝謝，這可能是最乾淨的方式。人們看到字桌並跑了一英里，但並不是那麼糟糕。 – user319940

+1清潔的做法。 – Praveen

-1

參考的一個問題（我不記得），

個

指定的百分比高度。百分比是根據生成的箱子的包含塊的高度計算得出的。如果未明確指定包含塊的高度（即，其取決於內容高度），並且該元素不是絕對定位，則該值計算爲'auto'。

所以使用jQuery，將是一個不錯的選擇。

var hei = $('.canvas').height(); 
$('.sidebar').height(hei);

入住這JSFiddle

來源

2013-06-28 09:18:26 Praveen

請分享downvotes的原因？ – Praveen

非常感謝您的理解，但是如果畫布中的內容比側邊欄短，那麼邊欄將無法觸及頁面的底部。 – smclintock

拋出jquery只是懶惰，尤其是因爲它沒有被標記或在問題中提到 – Pete

使用CSS的100％列高度

回答

相關問題