是否可以擴大沒有內容的div的高度？

我不知道爲什麼我今天無法弄清楚這一點？通常將列向左或向右浮動不成問題。我想這種特殊情況是獨一無二的，因爲我實際上沒有任何東西在左欄中。是否可以擴大沒有內容的div的高度？

該問題在此Fiddle中規定。

問題是我需要右列中的內容來垂直拉伸左列。我唯一能達到這個結果的方法是手動給左欄一個高度。謝謝你的幫助。

HTML

<div style="width: 940px;"> 
<div class="left"></div> 
<div class="right"> 
    Main content blah blah blah 
</div> 
<div class="clr"></div>

CSS

.left { 
    float: left; 
    width: 30px; 
    background-color:blue; 
} 
.right { 
    float:left; 
    background-color: red; 
} 

.clr { 
    clear: both; 
}

來源

2014-02-20 Chris Hawkes

如果必須使用浮動或想舊瀏覽器支持（IE7），你可以使用

.wrapper { 
    width: 940px; 
    overflow: hidden; 
} 
.left, .right { 
    padding-bottom: 1000000px; 
    margin-bottom: -1000000px; 
    min-height: 1px; 
}

其中1000000px可以是大於列高度的任何大值。

Demo

來源

2014-02-20 18:57:31 Oriol

我會接受這個答案。謝謝。在我看來，這是一個非常糟糕的情況，我試圖重新考慮設計，以便我可以避免這些類型的風格。這是一個非常豐富的答案，謝謝。 –

我建議去除浮動，並使用

.wrapper { 
    display: table; 
} 
.left, .right { 
    display: table-cell; 
}

Demo

來源

2014-02-20 19:00:11 Oriol

是否可以擴大沒有內容的div的高度？

回答

相關問題