当寡妇展开时，粘性页脚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/