flexbox可以在不訪問「body」的情況下填充整個屏幕嗎？

-2

在我的情況下，我無法將flex應用到body標籤。我可以達到相同的效果（粘性頁眉/頁腳與Flexbox佔據全屏），而不應用css到身體標記。這是相關的代碼。我評論了實現我想要的效果的身體CSS。flexbox可以在不訪問「body」的情況下填充整個屏幕嗎？

謝謝，馬特

/*html { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
*/ 
 
.flex-body { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction:column; 
 
} 
 

 

 

 
.main { 
 
    display: flex; 
 
    flex: 1 0 auto; 
 
} 
 

 
.nav { 
 
    flex: 0 0 12em; 
 
} 
 

 
.content { 
 
    flex: 1 0 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex: 1 0 auto; 
 
    flex-direction: row; 
 
    
 
} 
 
.col { 
 
    flex: 1 0 auto; 
 
} 
 

 
/* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE 
 
*/ 
 
body { 
 
    text-align: center; 
 
} 
 

 
*{ 
 
    box-shadow:inset 0px 0px 0px 1px #f00; 
 
}

<div class="flex-body"> 
 
<header class="header"> 
 
\t <section class="content"> 
 
\t <div class="row"> 
 
\t \t <div class="col"> 
 
\t \t \t Upper Left 
 
\t \t </div> 
 
\t \t <div class="col"> 
 
\t \t \t Upper Middle 
 
\t \t </div> 
 
\t \t <div class="col"> 
 
\t \t \t Upper Right 
 
\t \t </div> 
 
\t </div> 
 

 
\t </section> 
 
</header> 
 
<main class="main"> 
 
\t <nav class="nav"> 
 
\t \t Nav 
 
\t </nav> 
 
\t <section class="content"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col"> 
 
\t \t \t \t Upper Left 
 
\t \t \t </div> 
 
\t \t \t <div class="col"> 
 
\t \t \t \t Upper Middle 
 
\t \t \t </div> 
 
\t \t \t <div class="col"> 
 
\t \t \t \t Upper Right 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="row"> 
 
\t \t \t Middle 
 
\t \t </div> 
 
\t \t <div class="row"> 
 
\t \t \t Lower 
 
\t \t </div> 
 
\t </section> 
 
</main> 
 
<footer class="footer">Footer</footer> 
 
</div>

來源

2017-04-19 Matthew David Jankowski

僅當父元素具有明確高度時，高度和最小高度（百分比）才起作用 - 因此'.flex-body {min-height：100％;如果你不能指定body和html的高度，''不會工作。但你可以嘗試'100vh'而不是... – CBroe

身高：100％需要一個身高也很高的父母，所以可以計算出％。這裏身體沒有高度。爲了工作，你需要：'html，body {height：100％}'其中html從窗口的瀏覽器計算高度。 .flex-body可以使用此高度作爲高度或最小高度。請注意，在這種情況下IE遇到最小高度問題。添加到body'display：flex; flex-direction：column;'這裏有很多關於這些2的問題 –

你也可以覆瓦狀排列柔性boxe並使用柔性速記填補整個父的高度或寬度。 但是這意味着包括html &正文。

這種方式你需要處理高度/寬度和邊距/填充。瀏覽器將自行處理它。

html { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
body, 
 
.flex-body { 
 
    display: flex; 
 
    flex: 1;/* no need anymore to deal with height/width */ 
 
    flex-direction: column; 
 
} 
 

 
.main { 
 
    display: flex; 
 
    flex: 1; 
 
    /* mind this */ 
 
    /*overflow:auto; */ /* can come handy here if you want to keep footer in view */ 
 
} 
 

 
.nav { 
 
    flex: 0 0 12em; 
 
} 
 

 
.content { 
 
    flex: 1 0 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex: 1 0 auto; 
 
    flex-direction: row; 
 
} 
 

 
.col { 
 
    flex: 1 0 auto; 
 
} 
 

 

 
/* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE 
 
*/ 
 

 
body { 
 
    text-align: center; 
 
} 
 

 
* { 
 
    box-shadow: inset 0px 0px 0px 1px #f00; 
 
}

<div class="flex-body"> 
 
    <header class="header"> 
 
    <section class="content"> 
 
     <div class="row"> 
 
     <div class="col"> 
 
      Upper Left 
 
     </div> 
 
     <div class="col"> 
 
      Upper Middle 
 
     </div> 
 
     <div class="col"> 
 
      Upper Right 
 
     </div> 
 
     </div> 
 

 
    </section> 
 
    </header> 
 
    <main class="main"> 
 
    <nav class="nav"> 
 
     Nav 
 
    </nav> 
 
    <section class="content"> 
 
     <div class="row"> 
 
     <div class="col"> 
 
      Upper Left 
 
     </div> 
 
     <div class="col"> 
 
      Upper Middle 
 
     </div> 
 
     <div class="col"> 
 
      Upper Right 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     Middle 
 
     </div> 
 
     <div class="row"> 
 
     Lower 
 
     </div> 
 
    </section> 
 
    </main> 
 
    <footer class="footer">Footer</footer> 
 
</div>

來源

2017-04-19 14:25:20

的100vh一個最小高度添加到柔性容器：

.flex-body { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

然後將至少爲瀏覽器的視口一樣高（但將被允許如果需要，可以長高）。

來源

2017-04-19 14:25:23 keithjgrant

flexbox可以在不訪問「body」的情況下填充整個屏幕嗎？

回答

相關問題