css浮動並排div高度100％

我不知道如何問這個沒有圖片。我有兩個div，並排，在另一個div中有填充和邊距。這是我想要實現的：css浮動並排div高度100％

+-------------------------------------------------------------------+--------+ 
|          A       | C | 
| +-----------------------------------------------------------+ |  | 
| |        B       | |  | 
| |               | |  | 
| |               | |  | 
| |               | |  | 
| |               | |  | 
| |               | |  | 
| |               | |  | 
| +-----------------------------------------------------------+ |  | 
|                 |  | 
+-------------------------------------------------------------------+--------+

但這裏是我得到的。我能夠浮動div和補償邊距等，但我不能讓div C延伸到A的整個高度.A和B都沒有固定高度，所以我如何讓C延伸到A的全高？

+-------------------------------------------------------------------+--------+ 
|          A       | C | 
| +-----------------------------------------------------------+ |  | 
| |        B       | |  | 
| |               | |  | 
| |               | |  | 
| |               | +--------+ 
| |               |   | 
| |               |   | 
| |               |   | 
| +-----------------------------------------------------------+   | 
|                   | 
+----------------------------------------------------------------------------+

A的高度被B的高度拉伸，它也完全是流體佈局，因此寬度也不是固定的。基本上，我需要C到延長A.

的整個高度

我嘗試了所有的高度玩耍，但我不能得到它的工作，因爲高度不固定:(

A被。只是一個div包裝基本上沒有填充，沒有餘量乙實際上是由兩個div與margin和padding，浮子：左; C是僅有一個DIV，浮動：右;

編輯： 我還需要支持IE，不需要CSS hacker

來源

2011-01-05 sethvargo

是。問題是div C是浮動的，所以它實際上並不是A的孩子（與B相同）。身高適用於父母，並且C實際上沒有父母大小爲 – sethvargo 2011-01-05 20:03:40

有很多寫上關於CSS平等柱高度淨。我通常使用的解決方案是使用jQuery來計算所有列的最大高度，然後使用jQuery將所有列的高度設置爲相同的值。我通常手工做這件事，但有一些插件可以完成任務。

如果由於純粹的視覺原因需要使用相同的高度，您可以在列上創建背景圖像來創造相同高度的錯覺。這並不總是奏效，這取決於你的設計，但我過去曾經使用它。

來源

2011-01-05 20:22:46 mpdonadio

我最終不得不使用jQuery。我已經決定在IE6中不使用JS是不可能的，我可以要求瀏覽器支持JS。 – sethvargo 2011-01-05 20:51:16

使用jQuery解決IE6問題一直是我最近兩年左右的工具選擇，而不是在CSS hacks /變通方法（即使使用條件樣式表）上抨擊我的頭。也就是說，我不知道你的佈局需要什麼樣子，但用父容器上的背景圖像來僞造高度可能非常方便，並且通常是一個非常簡單的解決方案（當它工作時）。 – mpdonadio 2011-01-05 21:18:51

我不能這樣做，因爲寬度也是流體 – sethvargo 2011-01-05 21:51:38

如何使C position: absolute; right: 0;而不是浮動？像這樣：http://jsfiddle.net/JMC_Creative/2gr3T/1/

#a { overflow:auto; 
position: relative; 
} 

#b {height: 200px; 
    width: 200px; 
    margin: 50px; 
    float: left; 
} 

#c { height: 100%; 
    position: absolute; 
    right: 0; 
    width: 40px; 
}

來源

2011-01-05 20:06:49 JakeParis

這很好！除非我試圖支持Internet Explorer，我是。在IE6中，C被附加到頁面的右側，而不是A.是的，我知道IE很爛，我鄙視支持它，但我必須爲這個項目。 – sethvargo 2011-01-05 20:23:46

如果C_has_在A之外，那麼我會建議轉移到javasript來解決問題。 – JakeParis 2011-01-05 20:27:48

當父母的位置是相對的時，IE6應該是正確的，否則我太醉了。 – kapa 2011-01-05 20:27:52

這是一個瘋狂的想法，我不得不制定出CSS，但如果...

A含有B和C C的絕對定位對A的正確的東西，頂部和底部 A的右填充或保證金寬爲C

來源

2011-01-05 20:07:03 n8wrl

這是行不通的，我經常在我的web應用程序中使用這種方法。但它有缺點，特別是如果你不想溢出。 – Sandwich 2011-01-05 20:18:48

這不適用於IE6。它將C附加到頁面的右側，而不是A – sethvargo 2011-01-05 20:25:32

** #A **需要具有'position：relative'或'position：absolute'，否則對於''元素將是絕對的。這種方法一直符合IE5。但是，根據具體情況，是否有公平的缺點？ – Sandwich 2011-01-05 20:27:52

這是從我個人的庫中的片段，它可以幫助你，也看看這個question這更具體的的JavaScriptsolution。

一些注意事項：

默認情況下，這些值是絕對的<body>元素，除非
您設置父的position屬性要麼relative或absolute，否則元素將是絕對<body>或最接近元素position註冊。

/* 
Name: Absolute 100% Height 
Author: DSKVR 2010 
Website: http://dskvry.com 
*/ 

body *.full-height, 
body *.full-height-left, 
body *.full-height-left, 
body *.full-height-width { 
    position:absolute; 
    height:auto; 
    margin:0; 
} 

body *.full-height { 
top:0; 
bottom:0; 
} 

body *.full-height-left { 
    top:0; 
    bottom:0; 
    left:0; 
} 

body *.full-height-right { 
    top:0; 
    right:0; 
    bottom:0; 
} 

body *.full-area { 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

來源

2011-01-05 20:20:55 Sandwich