Question

我最近使用CSS网格重新设计了我的网站，并且遇到了FireFox 52的一个特定问题。我知道FireFox存在问题，因此，我正在寻求有关如何解决此小布局问题的帮助。< / p>

示例HTML

<div class="grid">
  <div class="item"><div></div></div>
  <div class="item">
    <p>Stuff</p>
    <p>Stuff</p>
    <p>Stuff</p>
    <p>Stuff</p>
    <p>Stuff</p>
    <p>Stuff</p>
  </div>
  <div class="item"></div>
</div>

示例CSS

.grid {
  width: 1200px;
  display: grid;
  grid-template-columns: 60% 1fr;
}
.item:first-child {
  background-color: blue;
  padding-right: 30px;
}
.item:first-child > div {
  position: relative;
  padding-bottom: 56.25%;
  background-color: purple;
}
.item:nth-child(2) {
  background-color: yellow;
}
.item:nth-child(3) {
  background-color: grey;
  grid-column: 1/3;
  margin-top: 16px;
  height: 50px;
}

我有两列，下面一列。左列中有一个div，用作iframe容器。为了使iframe响应，它使用填充底百分比来获取其高度。右列只是一列包含内容的列，底部是一列。

问题出在底部填充百分比上。网格布局无法识别带有padding-bottom的div的高度，因此底部的栏不允许在其顶部留出足够的空间。

如果左列具有高度，则解决方案会自行解决，但这是我要避免的事情。一旦布局降低到平板电脑大小（液体布局），将其设置为高度并使其保持响应状态可能需要一些JS和resize事件。

据我所知，此布局问题是FireFox 52特有的（通常会使其松散，但用户百分比仍然很大）。

Firefox 52中网格项子高度的CSS网格高度布局问题

0 个答案: