css 属性 - 底部不适用于位置为 :fixed 的网格容器

Question

我已经通过

设置了一个覆盖整个屏幕的容器

.container {
    display: grid;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

问题是如果我将属性 - 底部更改为另一个值，它不会影响显示。

function toggle(){
  var container = document.querySelector(".container");
  container.classList.toggle("pull-down");
}

.container {
  display: grid;
  grid-template-rows: 1fr 100px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.container.pull-down {
  bottom: -100px;
}

div {
  pointer-events: none;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 40px;
  width: 120px;
}

<div class="container">
  <div>first row</div>
  <div>second row</div>
</div>
<button onclick="toggle()">toggle</button>

我期望的是，如果用户单击该按钮，第二行将移出屏幕。

在 FF 上的行为是正确的，但在 chrome 版本 - 78.0.3904.108 上不正确。

Answer 1

这似乎是一个错误，因为如果您调整屏幕大小，它就会起作用。您可以在脚本中添加一些内容以强制刷新页面:

function toggle(){
  var container = document.querySelector(".container");
  container.classList.toggle("pull-down");
  
  /* Force page redraw*/
  container.style.display="none";
  setTimeout(function(){container.style.display="grid"},1);
  /* */
}

.container {
  display: grid;
  grid-template-rows: 1fr 100px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.container.pull-down {
  bottom: -100px;
}

div {
  pointer-events: none;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 40px;
  width: 120px;
}

<div class="container">
  <div>first row</div>
  <div>second row</div>
</div>
<button onclick="toggle()">toggle</button>