彈性盒粘頁腳內容溢出

似乎有很多這樣的事情。這裏有一個簡單的jsfiddle，頁腳粘貼到底部，但當內容溢出時，頁腳不會移動到底部。當內容擴展時，我希望頁腳移動到底部。彈性盒粘頁腳內容溢出

HTML：

<body> 
<div id="header">This is a Header</div> 
<div id="content">asdfasdfasdfadsf 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br>dasdfsfsa 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br>dasdfsfsa 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br>dasdfsfsa 

</div> 
<div id="footer">This is a Footer</div> 
</body>

CSS：

html, body { 
height: 100%; 
} 
body { 
min-height: 100vh; 
display: flex; 
flex-direction: column; 
} 
#header { 
background-color: red; 
min-width: 100%; 
} 
#content { 
background-color: white; 
flex: 1; 
} 
#footer { 
background-color: blue; 
}

http://jsfiddle.net/deadpickle/njvzjgje/2/

來源

2014-10-02 deadpickle

是頁眉和頁腳的高度是動態的還是固定的？ – Danield 2014-10-02 18:27:03

我想動態。在我自己的東西中，標題通常是百分比高度。 – deadpickle 2014-10-02 18:43:53

我覺得你很混淆Flex模型的意義。如果你想要內容溢出，那麼你可以拋棄flex模型（或者在其他元素中使用它）。另外，在身體上使用flex可能會導致非常意想不到的結果，除非您使用的是非常簡單且「裸露」的佈局 – Devin 2014-10-02 19:13:39

的問題是body元素在你的100％的高度規則。你有最小高度限制，所以只要刪除它。

但是如果您想在Safari 5.x上進行此項工作（不支持vh單元），請保留html的100％高度。所以你應該有這樣的事情：

html{ 
    height: 100%; 
} 

html, body{ 
    min-height: 100%; // older browser 
    min-height: 100vh; 
}

來源

2014-10-02 20:53:24

彈性盒粘頁腳內容溢出

回答

相關問題