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未正確定位後的元素

回答

相關問題