如何獲得一個div來填充它的包裝的高度，當它有一個浮動它？

我正在嘗試從頭開始構建一個響應式設計，並使用jsfiddle進行一些測試。我有兩個固定寬度的外部列和一個佔據其餘寬度的中間列。我不能爲了我的生活而讓外層的柱子擴大，以填補他們所在的包裝的高度。我認爲這可能與我如何讓中間商店佔據中心空間（把它放在右邊之後）有關div中的順序，然後添加溢出：隱藏）。如何獲得一個div來填充它的包裝的高度，當它有一個浮動它？

我已經嘗試用明確的div清除浮動：對它和也嘗試添加溢出：隱藏到包裝。

的的jsfiddle鏈接是：http://jsfiddle.net/jleslie/ErAWn/1/

任何幫助，將不勝感激！

來源

2012-09-25 JLeslie

歡迎StackOverflow的JLeslie。預計問題將包含其中的代碼片段。這不僅可以幫助其他用戶瞭解您的問題，還可以更輕鬆地發現問題並提出建議。嘗試將HTML和CSS代碼添加到您的問題中，以獲得更高的答案。 –

謝謝！我想連接我的小提琴算作那個？從現在開始，我一定會這麼做！ – JLeslie

你是對的。我衝過你的問題，沒有看到任何代碼，所以我認爲你沒有提供它。我的錯誤和我道歉。 –

請勿使用浮動物。你可以把它響應與左，右的絕對位置：

http://jsfiddle.net/ErAWn/4/

來源

2012-09-25 21:59:10 AlienWebguy

感謝您的回覆！我對響應式設計很陌生，但我喜歡不使用浮動的想法。絕對定位是否存在任何問題？ – JLeslie

請記住父容器也需要定位。如果不是絕對的，那麼它需要'position：relative'，否則絕對定位的元素將相對於WINDOW定位而不是父容器。 – AlienWebguy

運用這種風格的側欄，即使似乎工作在Safari，Chrome和FF沒有的jsfiddle工作，加上浮動被保留，如果你需要它：

.side_col { 
width: 200px; 
background-color: red; 
height: 100%;

}

來源

2012-09-25 21:59:14

感謝您的輸入！我還沒有嘗試過jsfiddle。似乎在ie8和之前有一些問題。我想在將來我不會認爲jsfiddle完美的工作......菜鳥的錯誤...... – JLeslie

如何獲得一個div來填充它的包裝的高度，當它有一個浮動它？

回答

相關問題