當寡婦展開時，粘性頁腳flexbox在鉻上丟失背景顏色

Question

我有一個帶有背景顏色的樹欄flexbox粘性頁腳。 當網站的內容溢出窗口時（這樣當它必須「向下移動」時），此頁腳會「鬆散」其背景顏色。 這個問題發生在Chrome和Opera上，但不是Firefox。

下面是一些代碼來重現問題：

按下按鈕切換擴展

document.getElementById('button').onclick = function() { 
 
    var x = document.getElementById('filling'); 
 
    if (x.style.display === 'none') { 
 
    x.style.display = 'block'; 
 
    } else { 
 
    x.style.display = 'none'; 
 
    } 
 
};

body { 
 
    margin: 0px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    background: grey; 
 
} 
 

 
footer { 
 
    background-color: lightgreen; 
 
    display: flex; 
 
} 
 

 
section { 
 
    flex: 1; 
 
}

<section> 
 
    <button id='button'>add some filling</button> 
 
    <div>there should be enough filling to overflow the window (so that the footer has to move)</div> 
 
    <div id='filling' style='display: none;'>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling<br/><br/><br/>filling</div> 
 
</section> 
 
<footer> 
 
    sticky footer is a flexbox 
 
</footer>

Answer 1

如果添加了一個min-height到您的頁腳，以防止從高處被改變：

footer { 
    background-color: lightgreen; 
    display: flex; 
    flex-shrink: 0; 
} 

它修復了您的問題。執行JavaScript時，頁腳高度設置爲0。這裏有一個小提琴：

https://jsfiddle.net/yonxrpw4/1/