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及其文本不与页脚重叠？

编辑：

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

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

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

谢谢

Answer 1

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

选项1。

footer应位于视口的底部，因此整个页面必须包含在视口中。

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

Codepen Demo

选项2。

footer应位于页面/文档的底部，页面可以是任意高度（可能是视口高度最小）。

在这种情况下，main元素的内容可以是任何大小，页面/文件的大小会增加以适应它

Codepen Demo

Chrome - flexbox - 包含框

1 个答案: