CSS Flex動態填充可用高度（無高度或位置）

-1

如何讓CSS Flex動態填充可用高度而不指定height或position（靜態）屬性？CSS Flex動態填充可用高度（無高度或位置）

在下面的XHTML代碼中，我需要淺藍色框填充空白到淺紅色元素。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Flex Vertical Fill Test</title> 
<style type="text/css"> 
#e1, #e2 {float: left; width: 50%;} 
#e1 {background-color: #cff;} 
#e2 {background-color: #ffc;} 
#e3 {background-color: #fcf; clear: both;} 
</style> 
</head> 

<body> 

<div id="e1"> 
<div><p>Needs to use full available height.</p></div> 
</div> 

<div id="e2"> 
<p>Automatically generates height from content.</p> 
<p>Automatically generates height from content.</p> 
<p>Automatically generates height from content.</p> 
<p>Automatically generates height from content.</p> 
</div> 

<div id="e3"><p>Natural content below</p></div> 

</body> 
</html>

我在Firefox 第一，那麼Chrome和IE測試這一點。

來源

2015-03-31 John

如果可以調整標記，您可以創建jsfiddle示例 – 2015-03-31 17:43:01

嗎？ – Stickers 2015-03-31 17:54:20

@sdcr高度主觀，＃e1實際上包含多個子div元素（不同的自動生成高度），但除此之外的任何東西都會太複雜以至於可能適用。我試圖保持簡單。 – John 2015-03-31 17:56:04

爲了得到它的工作，我加了一個容器e1和e2。

<div id="e1-e2"> 
    <div id="e1"> 
     <p>Needs to use full available height.</p> 
    </div> 
    <div id="e2"> 
     <p>Automatically generates height from content.</p> 
     <p>Automatically generates height from content.</p> 
     <p>Automatically generates height from content.</p> 
     <p>Automatically generates height from content.</p> 
    </div> 
</div> 
<div id="e3"> 
    <p>Natural content below</p> 
</div>

選項1：使用table和table-cell（推薦）。

#e1-e2 { 
    display: table; 
} 
#e1, #e2 { 
    display: table-cell; 
    width: 50%; 
}

演示：http://jsfiddle.net/qnz7mao6/

選項2：使用flexbox。

#e1-e2 { 
    display: flex; 
} 
#e1, #e2 { 
    width: 50%; 
}

演示：http://jsfiddle.net/86n04amt/

方案三：如果你還是喜歡float佈局。

#e1-e2 { 
    overflow: hidden; 
} 
#e1, #e2 { 
    float: left; 
    width: 50%; 
} 
#e1 { 
    background-color: #cff; 
    padding-bottom: 1000px; 
    margin-bottom: -1000px; 
}

演示：http://jsfiddle.net/11k8hds9/

提示：使用padding爲<p>，而不是margin以避免不必要的空白。

來源

2015-03-31 18:02:49 Stickers

那麼*應該*工作，但我沒有學會如何使這個問題的答案是這個問題的整個問題的垂直伸展flexbox工作。 *雖然有趣的想法聳聳肩+1。 – John 2015-03-31 18:06:19

flexbox很酷，但不會在稍微舊的瀏覽器上運行http://caniuse.com/#feat=flexbox我做了一個快速演示http://jsfiddle.net/86n04amt/（你仍然需要容器元素） – Stickers 2015-03-31 18:08:56

我'傾倒IE8和更老，IE9我保留測試沒有'XMLHttpRequest' 2.0，但正式支持IE10 +，所以我很好的支持。謝謝！ – John 2015-03-31 18:29:14

好吧我可以給一些純CSS的解決方案，但它會是正確的與js做。

這是HTML的一部分

<div class="container"> 
    <div class="fake-bg"></div> 
    <div class="fake-bg"></div> 
    <div id="e1"><p>Needs to use full available height.</p></div> 
    <div id="e2"> 
     <p>Automatically generates height from content.</p> 
     <p>Automatically generates height from content.</p> 
     <p>Automatically generates height from content.</p> 
     <p>Automatically generates height from content.</p> 
    </div> 
    <div class="clear"></div> 
</div> 

<div id="e3"><p>Natural content below</p></div>

和CSS paert

.container { 
    position: relative; 
} 
.clear { 
    clear: both; 
} 
.fake-bg { 
    height: 100%; 
    position: absolute; 
    width: 50%; 
    z-index: -1; 
} 

.fake-bg:nth-of-type(1) { 
    background-color: #cff; 
    left: 0; 
    top: 0; 
} 
.fake-bg:nth-of-type(2) { 
    background-color: #ffc; 
    right: 0; 
    top: 0; 
} 

#e1, #e2 {float: left; width: 50%;} 
#e1 {background-color: #cff;} 
#e2 {background-color: #ffc;} 
#e3 {background-color: #fcf; clear: both;}

一個的jsfiddle例如

enter link description here

來源

2015-03-31 17:57:40

如果我添加新的空元素，flexbox的要點是什麼？儘管我可以使用'fill-available'這樣的內在價值（即使使用'-moz'前綴），但它們顯然並不適用於高度。我試圖從IE6黑客中* * *。 – John 2015-03-31 18:02:15

CSS Flex動態填充可用高度（無高度或位置）

回答

相關問題