Question

我有一个带有背景颜色的树柱flexbox粘性页脚。这个页脚松散＆＃39;当网站内容溢出窗口时它的背景颜色（所以当它必须'向下移动'时）。问题发生在chrome和opera上，但不是Firefox。

以下是一些重现问题的代码：

按按钮切换扩展

＆＃13;

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

＆＃13;

body {
  margin: 0px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: grey;
}

footer {
  background-color: lightgreen;
  display: flex;
}

section {
  flex: 1;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果您向页脚添加min-height以防止更改高度：

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

它解决了你的问题。执行javascript时，页脚高度设置为0。这是一个小提琴：

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

当寡妇展开

1 个答案: