时间戳

首页 > 解决方案 > css 属性 - 底部不适用于位置为固定的网格容器

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

问题描述

我已经设置了一个容器，它通过以下方式覆盖整个屏幕

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

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

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 上不正确。

标签： cssgrid

解决方案

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

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>

推荐阅读