Flexbox 100％高度问题 [英] Flexbox 100% height Issue

问题描述

我找到了以下链接...但是它仍然不能帮助我...

页眉和页脚以及中间5列填充高度相等空间，然后当我做媒体查询时，像这样填充移动设备的屏幕：

这里是我到目前为止的代码...

 <！DOCTYPE html PUBLIC  -  // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
< title>无标题文档< / title> 
< style type =text / css> 
 html，
 body {
 height：100％; 
保证金：0 
} 
 
 .box {
 display：flex; 
 flex-flow：column; 
身高：100％; 
} 
 
 .box .row {
 border：1px dotted gray; 
} 
 
 .box .row.header {
 flex：0 1 auto; 
 / *上面是简写：
 flex-grow：0，
 flex-shrink：1，
 flex-basis：auto 
 * / 
} 
 
 .box .row.content {
 flex：1 1 auto; 
} 
 
 .box .row.footer {
 flex：0 1 40px; 
} 
 
。黄色背景{
背景：＃ffe001; 
} 
 
 .red-back {
 background：＃e31e25; 
} 
 
 .green-back {
 background：＃66af45; 
} 
 
 .purple-back {
背景：＃954294; 
} 
 
 .containerFull {position：relative;宽度：100％;保证金：0汽车; padding：0;} 
 .containerFull .column，
 .containerFull .columns {float：left;显示：内联; margin-left：0px; margin-right：0px; } 
 .containerFull .one-fifth.column {width：20％; } 
< / style> 
< / head> 
 
< body> 
 
< div class =box> 
 
< div class =row header> 
< p>< b>标头< / b> 
< br /> 
< br />（大小为内容）< / p> 
< / div> 
 
< div class =row content> 
 
< div class =containerFull> 
< div class =五分之一绿背>这里< / div> 
< div class =五分之一列红背>这里< / div> 
< div class =one-five column>这里< / div> 
< div class =五分之一的黄色背景>这里< / div> 
< div class =五分之一紫背>这里< / div> 
< / div><！ -  ContainerFull  - > 
 
< / div> 
 
< div class =row footer> 
< p>< b>页脚< / b> （固定高度）< / p> 
< / div> 
< / div> 
 
< / body> 
< / html> 
  

html ，身体{身高：100％; margin：0} .box {display：flex; flex-flow：column; box .row {border：1px dotted gray;}。box .row.header {flex：0 1 auto; height：100％;}。 / *以上是简写：flex-grow：0，flex-shrink：1，flex-basis：auto * /} .box .row.content {flex：1 1 auto;} .box .row.footer {flex ：0 1 40px;}。yellow-back {background：＃ffe001;}。red-back {background：＃e31e25;}。green-back {background：＃66af45;}。purple-back {background：＃954294;} .containerFull {position：relative;宽度：100％;保证金：0汽车; padding：0;}。containerFull .column，.containerFull .columns {float：left;显示：内联; margin-left：0px; margin-right：0px;}。containerFull .one-fifth.column {width：20％;}

 < div class =box> < div class =row header> < p为H.;< b取代;报头LT; / B个< br /> < br />（大小为内容）< / p> < / DIV> < div class =行内容> < div class =containerFull> < div class =五分之一绿背>这里< / div> < div class =五分之一列红背>这里< / div> < div class =five-column>这里< / div> < div class =五分之一的黄色背景>这里< / div> < div class =五分之一紫背>这里< / div> < / DIV> <！ -  ContainerFull  - > < / DIV> < div class =row footer> < p为H.;< b取代;页脚< / B个（固定高度）< / p> < / div>< / div>  

解决方案除了Michael Coker的回答，如果你用Flexbox完成所有的工作，你可以减少你的标记和CSS，并得到这个惊人的结果。

我还包括了您所评论/询问的背景图片和媒体查询，只是为了说明这可以做多简单。

在CSS中。当涉及到页眉和页脚时，如果你愿意的话，你可以给它们一个高度，但是这个工作并不需要，所以我把它们排除了，这样就可以看到Flexbox在分发内容方面的表现如何...希望我有这种技术在20年前：）

html，body { margin：0;}。box {display：flex; flex-direction：column;身高：100vh; / *而不是全部使用100％，一次使用视口单元* / background-size：cover;背景：黑色url（http://lorempixel.com/500/500/nature/4/）no-repeat center;}。box .row.content，.content .one-fifth.column {flex：1; / *填充空格相等，不管是行还是列方向* / display：flex;} .box .row.header，.box .row.footer {color：white; } .box .row.content {background：#fff; }。黄背{背景：＃ffe001; } .red-back {background：＃e31e25; } .green-back {background：＃66af45; } .purple-back {background：＃954294; } @media screen和（max-width：600px）{/ *更小的屏幕* / .box .row.content {flex-direction：column; / *通过简单的交换方向它在较小的屏幕上工作* /}

 < div class =box> < div class =row header> < p>< b> header< / b>< br />< br />（size to content）< / p> < / DIV> < div class =行内容> < div class =五分之一绿背>这里< / div> < div class =五分之一列红背>这里< / div> < div class =five-column>这里< / div> < div class =五分之一的黄色背景>这里< / div> < div class =五分之一紫背>这里< / div> < / DIV> < div class =row footer> < p为H.;< b取代;页脚< / B个（固定高度）< / p> < / div>< / div>  

I have found the following links... but it still doesn't help me...

how to make nested flexboxes work
Height 100% on flexbox column child
How to make flexbox children 100% height of their parent?

I need a full page that is responsive, like the following image: With header and footer and the middle 5 columns filling the height equally in the remaining space, and then when I do media queries, fill the screen of the mobile device like so:

Here's the code I have so far...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

.yellow-back {
    background: #ffe001;
}

.red-back {
    background: #e31e25;
}

.green-back {
    background: #66af45;
}

.purple-back {
    background: #954294;
}

.containerFull                                  { position: relative; width: 100%; margin: 0 auto; padding: 0;}
.containerFull .column,
.containerFull .columns                         { float: left; display: inline; margin-left: 0px; margin-right: 0px; }
.containerFull .one-fifth.column                { width: 20%; }
</style>
</head>

<body>

<div class="box">

  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>

    <div class="row content">

        <div class="containerFull">    
            <div class="one-fifth column green-back">Here</div>
            <div class="one-fifth column red-back">Here</div>
            <div class="one-fifth column">Here</div>
            <div class="one-fifth column yellow-back">Here</div>
            <div class="one-fifth column purple-back">Here</div>
        </div><!-- ContainerFull -->

    </div>

  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

</body>
</html>

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
      flex-grow: 0,
      flex-shrink: 1,
      flex-basis: auto
      */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

.yellow-back {
  background: #ffe001;
}

.red-back {
  background: #e31e25;
}

.green-back {
  background: #66af45;
}

.purple-back {
  background: #954294;
}

.containerFull {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.containerFull .column,
.containerFull .columns {
  float: left;
  display: inline;
  margin-left: 0px;
  margin-right: 0px;
}

.containerFull .one-fifth.column {
  width: 20%;
}

<div class="box">

  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>

  <div class="row content">

    <div class="containerFull">
      <div class="one-fifth column green-back">Here</div>
      <div class="one-fifth column red-back">Here</div>
      <div class="one-fifth column">Here</div>
      <div class="one-fifth column yellow-back">Here</div>
      <div class="one-fifth column purple-back">Here</div>
    </div>
    <!-- ContainerFull -->

  </div>

  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

解决方案

In addition to Michael Coker's answer, if you go all the way with Flexbox, you can cut down both your markup and CSS quite much and get this amazing result.

I also included the background image and media query you commented/asked about just to show how simple this can be done.

Made some notes in the CSS. When it comes to the header and footer, you can give them a height if you want, but is not needed for this to work, so I left them out so one can see how Flexbox excel in distributing the content...wish I had this technique 20 years ago :)

html, body {
  margin: 0;
}
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;          /* instead of using 100% all over, use viewport units once */
  background-size: cover;
  background: black url(http://lorempixel.com/500/500/nature/4/) no-repeat center;
}
.box .row.content,
.content .one-fifth.column {
  flex: 1;                /* fill the space equal, no matter row or column direction */
  display: flex;
}

.box .row.header,
.box .row.footer { color: white; }
.box .row.content { background: #fff; }
.yellow-back { background: #ffe001; }
.red-back { background: #e31e25; }
.green-back { background: #66af45; }
.purple-back { background: #954294; }

@media screen and (max-width: 600px) {
  /* smaller screens */
  .box .row.content {
    flex-direction: column;   /* by simply swap direction it work on smaller screen */
  }
}

<div class="box">
  <div class="row header">
    <p><b>header</b><br /><br />(sized to content)</p>
  </div>

  <div class="row content">
    <div class="one-fifth column green-back">Here</div>
    <div class="one-fifth column red-back">Here</div>
    <div class="one-fifth column">Here</div>
    <div class="one-fifth column yellow-back">Here</div>
    <div class="one-fifth column purple-back">Here</div>
  </div>

  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

这篇关于Flexbox 100％高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！