flexboxは 'body'にアクセスすることなく画面全体を満たすことができますか？

Question

私の状況ではbodyタグにflexを適用することができません。 bodyタグにCSSを適用せずに、同じ効果（フレックスボックスがフルスクリーンで表示されている固定ヘッダー/フッター）を達成できますか？ここに関連コードがあります。私は、私が望む効果を達成するボディCSSをコメントアウトしました。

おかげで、 マット

/*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>

Answer 1

あなたはまた、フレックスボクセのウロコ状と全体の親の高さや幅を埋めるためにフレックス速記を使用することができます。 しかし、これは、&の本文を含めることを意味します。

この方法で、高さ/幅と余白/パディングを処理する必要があります。ブラウザはそれ自体を処理します。

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>

Answer 2

フレックスコンテナに100VHの最小の高さを追加します。

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

そして、それはブラウザのビューポートと少なくとも同じ高さになります（これだけに許可されます必要に応じて背が高くなる）。