CSS 属性 - 底部不适用于位置:固定的网格容器

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>