html - Chrome - flexbox - 包含框

Question

请在 Chrome 中查看此笔:codepen example

html:

<div class='flexbox'>
  <div class='static'>ddd
  </div>
  <div class='flex'>
    <div class='flex-child'>
      <div class='container'>
        *** very long text here *** ...</div>
    </div>
    <div class='flex-child'>hhh
    </div>
    <div class='flex-child'>hhh
    </div>
  </div>
  <div class='static'>ddd
  </div>
</div>

CSS:

html,body{
  margin:0;
  padding:0;
  overflow:hidden;
}
.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
  display:flex;
  position : relative;
}

.flex-child{
  background:red;
  width:100%;
  display:block;
  color:white;
  position : relative;
}

.static{
  background:transparent;
  width:100%;
  color:yellow;
}

.container{
  position : relative;
  background:magenta;
  height:100%;      
}

我相信这个例子几乎是不言自明的。 问题是:如何做到这一点，让 .container div 准备好承载目前未知的任何类型的内容，并且不要与页脚重叠。

尝试去除背景颜色。来自 .container 的文本在视觉上与 .static 页脚的文本混合在一起。如何安排它并让 .content div 及其文本不与页脚重叠？

编辑:

页脚应位于视口(viewport)的底部。 不允许在 css 中设置明确的大小或尺寸。

请以我的问题为例，做个实验。 我关心的是不要使用任何明确的大小或尺寸，例如标题高度 50px，我希望布局尽可能通用。所以如果我换句话说我的问题: 请在我原来的 codepen 中删除 .container 中的所有文本，然后通过开发人员工具检查 .container 高度。它将为 0，但我希望它的高度与其父 .flex-child 的高度相同。 我知道它可能不会遵循规范，但如何实现呢？

编辑 2: 我在另一个问题中使用代码笔和图片更详细地描述了我的问题。谢谢你的想法。 https://stackoverflow.com/questions/32114925/header-flexible-body-with-nested-flexible-columns-footer-concrete-layout

谢谢

Answer 1

对于footer的实际位置，您的实际要求有点不清楚。

选项 1。

页脚 应位于视口(viewport)底部，因此整个页面必须包含在视口(viewport)内。

在这种情况下，main 元素的内容可以是任意大小，当内容超出元素的高度时会添加一个滚动条。

Codepen Demo

选项 2。

页脚 应该位于页面/文档 的底部，页面可以是任意高度(大概是视口(viewport)高度的最小值)。

在这种情况下，main 元素的内容可以是任意大小，页面/文档会增加大小以容纳它

Codepen Demo