Flexbox，就如何有一個項目，同時保留高度

我有一個容器內的3個容器與容器內的內容。

我想讓這些容器中的每一個都填滿剩下的任何房間，如果其中一個被垂直和水平移除。

我使用flexbox flex-flow: row wrap，當我們說我們刪除兩個底部容器中的一個時，這個工作很好。

然後爲了讓它們在垂直方向重新調整大小，我使用高度自動屬性，並且可以預測容器元素填充了其容器的剩餘高度。

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     div{border: 1px solid black} 
     html, body{height: 100%; width: 100%;} 
     #container1{ 
      width: 100%; 
      height: 100%; 
      display: flex; 
      flex-flow: row wrap; 
     } 
     #subContainer3, #subContainer2{ 
      flex: 1 49%; 
     } 
     #subContainer1{ 
      flex: 1 100%; 
     } 
     .content{ 
      background-color: lightgray; 
      height: 90%; 
     } 
    </style> 
</head> 
<body> 
    <div id="container1"> 
     <div id="subContainer1"> 
      <div class="content"></div> 
     </div> 
     <div id="subContainer2"> 
      <div class="content"></div> 
     </div> 
     <div id="subContainer3"> 
      <div class="content"></div> 
     </div> 
    </div> 
</body> 
</html>

但是因爲我沒有爲子容器明確的高度，在其中所有的內容將無法爲子容器的百分比。

我該如何達到預期的目標：讓子容器在行和列方向上同時調整大小，同時讓它們的內容佔其高度的百分比？

**** ****注意

作爲一個額外的評論，而這可能會明顯一些，通過柔性盒確定的任何高度仍然會受到任何孩子的div嘗試使用百分比高度無法識別。例如，如果我們的內容劃分了他們自己有孩子的地方，而這些孩子想要成爲他們父母身高的百分比，那麼我們必須在列方向上使用彈性框來建立這個，而不是％高度。

來源

2016-02-12 Loren Shqipognja

我認爲'height：90％;'不起作用在這裏，作爲最大的「內容」決定外部容器的高度，以及柔性排，並且你自己說「高度：90％」？ –

對不起，我知道高度90％不起作用，我只是用代碼來說明問題。我想要一個解決方案，我可以保持90％的高度，同時可以讓subContainer div垂直展開。一旦我設置了subContainer的高度，內容高度（90％）就可以工作，但如果我取消讓我們說tio的div，剩下的div不會擴大來填充高度。 –

所以有'.content'的兄弟姐妹？你想讓'content'在'subContainer'中按比例增加（高度的9倍）？你想要的設計不清楚=/ –

可以實現通過另一Flexbox將添加到子容器的DIV：

div{border: 1px solid black} 
 
    html, body{height: 100%; width: 100%; margin:0;padding:0} 
 
    #container1{ 
 
     width: calc(100% - 4px); 
 
     height: calc(100% - 4px); 
 
     display: flex; 
 
     flex-flow: row wrap; 
 
    } 
 
    #subContainer3, #subContainer2{ 
 
     flex: 1 49%; 
 
     display:flex; 
 
     flex-flow: column wrap; 
 
    } 
 
    #subContainer1{ 
 
     flex: 1 100%; 
 
     display:flex; 
 
     flex-flow: column wrap; 
 
    } 
 
    .content{ 
 
     flex: 1 100%; 
 
     background-color: lightgray; 
 
    }

<div id="container1"> 
 
    <div id="subContainer1"> 
 
     <div class="content"></div> 
 
    </div> 
 
    <div id="subContainer2"> 
 
     <div class="content"></div> 
 
    </div> 
 
    <div id="subContainer3"> 
 
     <div class="content"></div> 
 
    </div> 
 
</div>

注意：我刪除了margin和padding從頁面以避免scr OLLS，只要你想保留邊界我還編輯了主容器div的寬度和高度爲-4px，這是邊框的額外寬度和高度

來源

2016-02-12 21:08:33

如果我將高度設置爲子容器的div，那麼當子容器被移除時，它們不會像水平方向那樣在垂直方向上靈活擴展。例如，如果刪除subContainer1，則其他兩個子容器不會填滿整個頁面。這是問題 –

的精華對不起，我編輯了答案，我認爲它會做你現在正在尋找的東西 –

嘗試使用填充來添加一些佔位符高度，並且默認align-items: stretch;應該保持content列的高度相等。在動態高度容器的孩子中使用height: 90%;沒有任何意義。

您可以在height的值%的值有效並且在此處不起作用時找到很好的說明。我也有一個答案在那裏如何使一個高度成正比的容器width，這可能是爲你設計一個選項：

Percentage Height HTML 5/CSS

來源

2016-02-12 20:53:13

您需要添加圍繞子容器額外的包裝2 & 3並使用嵌套的flex。以下示例演示了這一點。

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#container1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.horizontal { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    flex: 1 0 auto; 
 
} 
 
#subContainer1, 
 
#subContainer2, 
 
#subContainer3 { 
 
    flex: 1 0 auto; 
 
    border: 1px solid black; 
 
} 
 
.content { 
 
    background-color: lightgray; 
 
}

<div id="container1"> 
 
    <div id="subContainer1"> 
 
    <div class="content"></div> 
 
    </div> 
 

 
    <div class="horizontal"> 
 
    <div id="subContainer2"> 
 
     <div class="content"></div> 
 
    </div> 
 
    <div id="subContainer3"> 
 
     <div class="content"></div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-02-12 20:57:21 Giorgos

Flexbox，就如何有一個項目，同時保留高度

回答

相關問題