Basis簡單的Flex佈局

Question

你能幫助以下嗎？

<div id="stage" class="flex-container"> 
      <header> 
       <b>Top content</b> 
      </header> 
      <aside> 
       Right 
      </aside> 
      <footer> 
       Footer 
      </footer> 
     </div> 

我想有22％的寬度和88％的高度，安裝在右側。 我希望有頭開始88％的寬度和88％的高度安裝到頂部，而頁腳明顯是：22高度和100％寬度安裝到地板上;）

我一直在爲這個問題而戰現在一天。希望你能幫助我。

Answer 1

父容器設置爲一個顯式的高度（例如400像素）：

#stage { 
    height: 400px; 
} 

然後漂浮一邊，彼此相鄰頭父DIV中（例如主），並應用一個clearfix到主要（例如搭配：後）：

jsFiddle

另外，如果你希望你的佈局是視口的高度的100％，您可以設置html和身體爲100％，並給予#stage的100％的高度太：

html,body{ 
    100%; 
} 

#stage { 
    border: .125em solid; 
    height: 100%; 
} 

jsFiddle

Answer 2

AAAAH我只是找到了解決辦法：很簡單的，如果你問我。

body,html 
{ 
    height:100%; 
    width: 100%; 
    margin: 0; 
} 
#stage 
{ 
    height: 100%; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 
aside 
{ 
    background-color: red; 
    height: 88%; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 12%; 
} 
footer 
{ 
    background-color: #ffc107; 
    bottom: 0; 
    color: #333; 
    height: 12%; 
    position: absolute; 
    width: 100%; 
} 
header 
{ 
    background-color: #3F51B5; 
    color: #fff; 
    height: 88%; 
    left: 0; 
    top: 0; 
    position:absolute; 
    width:88%; 
}