flexbox无法正确定位后的元素

Question

我正在尝试使用flexbox创建布局。

http://codepen.io/anon/pen/YGvJpX?editors=1100

我真的不明白我应该如何让页面元素（绿色的东西）出现在flexbox之后，而不是像它在codepen中所示。

**编辑**忘记提及位置：fixed在那里，以便.stream拥有自己的滚动条，自动扩展到窗口的大小。

以下是代码：

html,
body {
  background: grey;
  margin: 0;
  padding: 0;
}
.header {
  background: blue;
}
.outer {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
}
.outer .boxA {
  flex: 0 0 250px;
  background: pink;
  align-self: flex-start;
}
.outer .boxC {
  flex: 0 0 150px;
  background: yellow;
  align-self: flex-start;
}
.outer .inner {
  background: white;
  display: flex;
  height: 100%;
  width: 600px;
  flex-direction: column;
}
.outer .inner .stream {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.footer {
  width: 100%;
  background: green;
  text-align: center;
}

<div class="outer">
  <div class="boxA">
    <h3>Some content</h3>
    <p>blah blah blah</p>
  </div>
  <div class="inner">
    <div class="header">
      <h2>blah</h2>
    </div>
    <div class="stream">
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
    </div>
  </div>
  <div class="boxC">
    <h3>Box C</h3>
    <p>yadda yadda</p>
  </div>
</div>

<div class="footer">
  <p>hello</p>
</div>

Answer 1

您希望页脚位于div.outer的底部吗？

如果是这样，只需更改：

.outer { display:flex; position:fixed; top: 0; bottom: 0;}

到此：

.outer { display:flex; top: 0; bottom: 0;}

Answer 2

  

footer位于outer元素后面，因为   成为fixed元素outer将从正常流中删除   DOM元素。您在此处不需要position: fixed - 将其移除并在footer下方获取flexbox。

如果您希望在视口中填充所有内容，则可以使用视口单元（vh）代替position: fixed来获得填充视口中所有内容的效果。

所以这里有一些东西可以让你开始：

1. 删除了position: fixed元素

的outer

2. 使用列flex-flow将outer和footer包装到wrapper元素中：

   .wrapper{
     display: flex;
     flex-direction: column;
     height: 100vh;
   }
   

   同时将100vh分发给footer和outer元素 - 例如90vh为outer和10vh footer }

3. 将overflow-y: auto提交至outer，flex-shrink: 0提交至header。

4. 对于较小的视口高度，p中footer的边距可能会导致body溢出 - 您可以为p设置margin: 0。

html,
body {
  background: grey;
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  background: blue;
  flex-shrink: 0; 
}
.outer {
  display: flex;
  overflow-y: auto;
  height: 90vh;
}
.outer .boxA {
  flex: 0 0 250px;
  background: pink;
  align-self: flex-start;
}
.outer .boxC {
  flex: 0 0 150px;
  background: yellow;
  align-self: flex-start;
}
.outer .inner {
  background: white;
  display: flex;
  /*height: 100%;*/
  width: 600px;
  flex-direction: column;
}
.outer .inner .stream {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.footer {
  width: 100%;
  background: green;
  text-align: center;
  height: 10vh;
}
.footer p {
  margin: 0;
}

<div class="wrapper">

  <div class="outer">
    <div class="boxA">
      <h3>Some content</h3>
      <p>blah blah blah</p>
    </div>
    <div class="inner">
      <div class="header">
        <h2>blah</h2>
      </div>
      <div class="stream">
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
        <p>Hello 123 456 789 k thx bye</p>
      </div>
    </div>
    <div class="boxC">
      <h3>Box C</h3>
      <p>yadda yadda</p>
    </div>
  </div>

  <div class="footer">
    <p>hello</p>
  </div>

</div>

对于column弹性方向，我认为调整overflow和height s有点棘手，除非您在整个嵌套的flexbox中使用视口高度。

让我知道您对此的反馈。谢谢！

Answer 3

试试这个

＆＃13;

＆＃13;

html,
body {
  background: grey;
  margin: 0;
  padding: 0;
}
.header {
  background: blue;
}
.outer {
  display: flex;
}
.outer .boxA {
  flex: 0 0 30%;
  background: pink;
  align-self: flex-start;
}
.outer .boxC {
  flex: 0 0 30%;
  background: yellow;
  align-self: flex-start;
}
.outer .inner {
  background: white;
  display: flex;
  height: 100%;
  width: 40%;
  flex-direction: column;
}
.outer .inner .stream {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.footer {
  width: 100%;
  background: green;
  text-align: center;
}

＆＃13;

<div class="outer">
  <div class="boxA">
    <h3>Some content</h3>
    <p>blah blah blah</p>
  </div>
  <div class="inner">
    <div class="header">
      <h2>blah</h2>
    </div>
    <div class="stream">
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
      <p>Hello 123 456 789 k thx bye</p>
    </div>
  </div>
  <div class="boxC">
    <h3>Box C</h3>
    <p>yadda yadda</p>
  </div>
</div>

<div class="footer">
  <p>hello</p>
</div>

＆＃13;

＆＃13;

＆＃13;