flexbox未正确定位后的元素

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

我真的不明白我应该如何获得页脚元素（绿色的东西）的Flexbox的后出现，而不是它背后如图所示codepen。

**编辑**忘了提及位置：固定在那里为.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>

来源

2016-10-13 w--

footer位于outer元素之后，因为是fixed元素outer已从DOM元素的正常流程中移除。您在这里不需要position: fixed - 将其删除并在flexbox的正下方获得footer。

如果填充在视口中一切都是你的愿望，你可以使用视台（vh），而不是position: fixed获得在视口中灌一切的效果。

所以这里的东西，让你开始：

删除position: fixed为outer元素
裹outer和footer成wrapper元素与柱弯曲流：
```
.wrapper{ 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
} 
```
也分发100vh到footer和outer为了说明90vh元素 - 说的outer和10vh为footer
给overflow-y: auto到outer和flex-shrink: 0到header。
对于较小的视口的高度，的p在footer保证金可能导致body溢出 - 你可以设置margin: 0用于p。

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弯曲方向我想这是一个有点棘手，除非你整个嵌套flexboxes使用视口的高度来调整overflow S和height秒。

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

来源

2016-10-13 16:16:07 kukkuz

感谢您使用高度：100vh的简洁解释和解决方案。这是我真正缺失的一块。 –

你想在div.outer底部的页脚？

如果是这样，只是改变这一点：

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

这样：

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

来源

2016-10-13 11:59:57 Gamaliel

忘记提及位置：固定在那里，以便让.stream具有它自己的滚动条，自动扩展到窗口的大小。 –

试试这个

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; 
 
}

<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>

来源

2016-10-13 12:27:52 user264675

忘记提及位置：固定位置，以便让.stream拥有自己的滚动条，该滚动条自动延伸至窗口的大小。 –

flexbox未正确定位后的元素

回答

相关问题