logo标签列表

Flexbox 100%高度问题

htmlcssflexbox
5
我找到了以下链接，但仍然不能帮助我解决问题：
如何使嵌套的弹性盒子工作
弹性盒子列子元素高度为100％
如何使Flexbox子元素的高度与其父元素相同？
我需要一个响应式的完整页面，就像下面的图片一样：
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>

我忘了说我想让背景图片或颜色填满空间...谢谢！ - JP Greeff
也许这篇文章可以帮到你。Content within div won't fill available space without specifying height，请确保将body的高度设置为100vh，然后设置其余内容的高度会更容易。此外，使用CSS重置文件可以避免奇怪的行为。 - Omar Yafer
2个回答
11
除了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>

@lgson 这太棒了，而且运行得非常好！现在...我只需要图标（PNG）和下面的标题保持在弹性高度框的中间，然后当在移动设备上时，图标必须向左移动，标题必须位于图标的右侧。可行吗？ - JP Greeff
1
@LGSon 太完美了！虽然我不是同性恋，但我觉得我可能要娶你了！谢谢！ - JP Greeff
2

我会将列部分也设置为弹性布局。您可以将.content和.containerFull设置为display: flex，然后.containerFull将“拉伸”以填充.content的高度，然后您可以在列上使用flex-basis来控制宽度。

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%;
}
<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>

点赞了你的回答，但我还是要发表自己的回答，因为这是一个经典问题，使用极少的代码和标记，flexbox 表现得非常出色 :) - Asons
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接