使用垂直偏移将元素扩展到屏幕底部答案

【问题标题】：Extend element to bottom of screen with vertical offset使用垂直偏移将元素扩展到屏幕底部
【发布时间】：2016-07-07 20:19:57
【问题描述】：

我有一个从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/

** 更新 ** 我修改了我的 jsfiddle，在 article 子元素中添加了更多内容。内容将从 flex 容器中流出。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

#main
{
   height: 100vh;
}

100vh 表示视口高度的 100%，您可以根据需要更改此值。

【讨论】：

【解决方案2】：

您可以将高度设置为 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/

【讨论】：

如果article 元素中有很多内容，内容最终会溢出到框外。请看我更新的小提琴：jsfiddle.net/1cpcsvjr/5
@MisterEpic 您使用哪个浏览器？（我的 ff 扩展了盒子，但你需要向下滚动）
暂时删除我的帖子，我需要创建一个更好的测试用例。
@MisterEpic 好的，同时...您可以将 body 更改为 min-height:100% 或设置 overflow:auto 为 flex children 以保持在窗口内 jsfiddle.net/1cpcsvjr/6 jsfiddle.net/1cpcsvjr/7

【解决方案3】：

Flexbox 解决方案。

您必须将 html 和 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>

【讨论】：

如果文章内容很多，内容最终会在框外流血。请看我更新的小提琴：jsfiddle.net/1cpcsvjr/5