CSS中間高度

我有以下css http://jsbin.com/azivip/75/edit我想要有黃色div高度來填充藍色和綠色div之間的空間。使用高度繼承似乎使得div超越了綠色div。CSS中間高度

有什麼想法嗎？

感謝

2013-03-08 krafo

它必須是跨瀏覽器的解決方案？ – Morpheus 2013-03-08 09:46:24

沒有必要不，如果它是跨瀏覽器，它會更好，但如果它適用於Chrome/Firefox，那就足夠了 – krafo 2013-03-08 09:50:13

所以你可以使用css3'calc（）'：'#testsContainer {height：calc（100％-140px;）}'' 140px = 100px resultsContainer + 40px buttonsContainer' – Morpheus 2013-03-08 09:52:05

您可以使用CSS3 calc()：

#testsContainer { 
    height: calc(100% - 140px); 
}

凡140px = 100px of resultsContainer + 40px of buttonsContainer

fiddle

編輯

對於舊版本的Firefox，使用-moz-calc()前綴，對於較早版本的Chrome/Safari，使用-webkit-calc()前綴。

來源

2013-03-08 09:56:17 Morpheus

這隻能在IE9中工作。您可以使用-moz-前綴使其在Firefox中工作：'height：-moz-calc（100％ - 140px）;' – 2013-03-08 10:08:00

這僅適用於舊版本的Firefox。對舊版Chrome和safari使用'-webkit-calc'。所有最新版本的瀏覽器都不使用前綴。 – Morpheus 2013-03-08 10:10:39

非常感謝你們！用Firefox看起來工作正常，任何想法如果可能的話可以做什麼來處理鉻？鉻似乎不支持calc（） – krafo 2013-03-08 10:15:15

Working fiddle

只需更改下面的CSS代碼中的：

#testsContainer { 
    position:absolute; /* replace with position: relative */ 
    top:100px; /* height of the above container */ 
    bottom:40px; /* height of the below container */ 
    left:0px; 
    right:0px; 
    margin-top:0px; 
    margin-bottom:0px; 
    background-color:yellow; 
}

給top值等於div#resultsContainer和bottom值等於div#buttonsContainer的高度高度。
給出left: 0和right:0。這樣容器就可以佔用這個空間而無需使用JavaScript或calc（）css屬性的支持。
刪除height:inherit
更換position: relative與position: absolute

來源

2013-03-08 11:18:32

非常感謝它的工作！ – krafo 2013-03-21 23:35:34

@chris如果我的帖子解決了您的問題，請將其標記爲答案。 :) – 2013-03-22 03:56:49

回答

相關問題