html - 当窗口展开时，粘性页脚 flexbox 在 chrome 上失去背景颜色

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。这是一个 fiddle :

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