Flexbox 100％高度问题

时间：2017-05-19 17:30:12

标签： html css flexbox

我找到了以下链接......但它仍然无法帮助我......

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

我需要一个响应的完整页面，如下图所示： full page 使用页眉和页脚以及中间5列在剩余空间中均匀填充高度，然后当我进行媒体查询时，填写移动设备的屏幕，如下所示：

mobile view

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

<!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>

2 个答案:

答案 0 :(得分：7)

除了Michael Coker的回答，如果你一直使用Flexbox，你可以大大减少你的标记和CSS，并获得这个惊人的结果。

我还包括您评论/询问的背景图片和媒体查询，以表明这是多么简单。

在CSS中做了一些笔记。当涉及到页眉和页脚时，你可以根据需要给它们一个高度，但这不需要它，所以我把它们排除在外以便人们可以看到Flexbox如何在分发内容方面表现出色...希望我有这种技术20年前：） 

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>

答案 1 :(得分：2)

我也会将列部分设为flex布局。您可以将.content和.containerFull设置为display: flex，然后.containerFull将＆＃34;延伸＆＃34;填充.content的高度，然后您可以使用列上的flex-basis来控制宽度。

＆＃13;
＆＃13; 
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 {
  display: flex;
}

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

.containerFull {
  display: flex;
}

.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 {
  margin-left: 0px;
  margin-right: 0px;
}

.containerFull .one-fifth.column {
  flex-basis: 20%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题