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”的情况下填充整个屏幕吗？

回答

相关问题