Question

我从MDN's flexbox page获得了一个简单的布局。它有一个标题和一个主要内容区域。

<header>header</header>
<div id='main'>
  <article>article</article>
  <aside>aside</aside>
</div>

我希望主要内容区域扩展到视口的底部，或者如果它需要容纳其子节点。我试着摆弄flexbox，但我仍然无法指定我希望它能像水平一样垂直占据所有空间。

我能想到的唯一两个选择是：

A）Javascript来计算所需的身高

B）在主体上平铺背景图像，使其看起来好像内容区域一直向下延伸

如果孩子们延伸到屏幕的底部，是否有人可以想到填充视口的替代方案，还包含子项？

https://jsfiddle.net/1cpcsvjr/5/

**更新**我使用article子元素中的更多内容修改了我的jsfiddle。内容将从弹性容器中渗出。

Answer 1

#main
{
   height: 100vh;
}

100vh表示100％的视口高度，如果需要，可以更改此值。

Answer 2

Flexbox解决方案。

您必须设置html＆amp; body个元素达到100％的高度。

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  font: 24px Helvetica;
  background: #999999;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
#main {
  margin: 0px;
  padding: 0px;
  flex: 1;
  background: pink;
  display: flex;
}
#main > article {
  margin: 4px;
  padding: 5px;
  border: 1px solid #cccc33;
  background: #dddd88;
  flex: 3 1 60%;
  order: 2;
}
#main > nav {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  background: #ccccff;
  flex: 1 6 20%;
  order: 1;
}
header {
  display: block;
  margin: 4px;
  padding: 5px;
  min-height: 100px;
  border: 1px solid #eebb55;
  border-radius: 7pt;
  background: #ffeebb;
}

<header>header</header>
<div id='main'>
  <article>article</article>
  <aside>aside</aside>
</div>

Answer 3

您可以将高度设置为html一个正文以填充权利窗口，并使用来自正文的flex。

body {
        font: 24px Helvetica;
        background: #999999;
        display:flex;
        flex-flow: column;
    }
html, body {
  height:100%;
  margin:0;
}
    #main {
        margin: 0px;
        padding: 0px;
        display: flex;
        flex-flow: row;
        flex:1;/* fills entire space avalaible (or share evenly if sibblings)*/
    }

    #main > article {
        margin: 4px;
        padding: 5px;
        border: 1px solid #cccc33;
        background: #dddd88;
        flex: 3 1 60%;
        order: 2;
    }

    #main > nav {
        margin: 4px;
        padding: 5px;
        border: 1px solid #8888bb;
        background: #ccccff;
        flex: 1 6 20%;
        order: 1;
    }
    
    header {
        display: block;
        margin: 4px;
        padding: 5px;
        min-height: 100px;
        border: 1px solid #eebb55;
        border-radius: 7pt;
        background: #ffeebb;
    }

<header>header</header>
    <div id='main'>
      <article>article</article>
      <aside>aside</aside>
    </div>

https://jsfiddle.net/1cpcsvjr/2/

使用垂直偏移将元素延伸到屏幕底部

3 个答案: