javascript - CSS 网格在下一个页面 View 中被破坏

Question

我有一个分解成 CSS 网格的网站。网格相当简单，只是用于在移动设备下以不同的顺序重新排列内容。

这里是移动网格的总体布局:

.product-page-container {
      display:grid;
      grid-template-columns:100%;
      grid-template-rows:75px min-content min-content min-content min-content min-content min-content min-content 75px;
      grid-template-areas:
    "banner"
    "productDetails"
    "productHero"
    "productPurchase"
    "productDescription"
    "productVideo"
    "features"
    "meta"
    "footerBanner"
  }

我只是将行的大小设置为一般内容。

在“功能”下，我有一个导航栏，您可以在其中过滤各种不同的 View (产品功能、规范和评论)。

我就是在这里发现了这个让我做噩梦的奇怪错误。在审查中，如果您单击“下一步”，行的大小就会变得疯狂。页脚横幅延伸超过 75px，'productDetails' 和 'productHero' 向上移动。

这是在 Shopify 中构建的，这里有一个链接可以查看我所指的内容。

https://rq852rt3ja4kgxnq-11502512.shopifypreview.com

您必须进入移动 View 才能看到错误。考虑到下一个页面 View 的高度可能更大/更短，我相信它必须与重新加载和分页有关。

我已经尝试通过在某些行上设置“minmax(700px,min-content)”来修复一些问题，看看是否有任何改变，但我无法得到任何结果。

是什么导致了这种奇怪的行为？我似乎无法查明这个问题的原因以及我的底行 footerBanner 最终如何长到这么大的高度下一页分页后。我试图重新创建一个类似的情况，它似乎表现得很好。

function ChangeSize () {
  document.getElementById("strangeBox").style.height = "100px";
}

.container {
  display:grid;
  grid-template-columns:100%;
  grid-template-rows: 10px min-content min-content 10px;
  grid-template-areas:
  "top"
  "box"
  "variable"
  "bottom"
}

.topBox {
  height:100%;
  background-color:blue;
  grid-area: top;
}

.box {
  height:100px;
  background-color:green;
  grid-area: box;
 }
 
 .strangeBox {
  height:50px;
  background-color:red;
  grid-area:variable;
 }
 
 .bottomBox {
  height:100%;
  background-color:blue;
  grid-area: bottom;
}

<div class="container">
  <div class="topBox">
  </div>
  <div class="box">
  </div>
  <div class="strangeBox" id="strangeBox">
    <button onclick="ChangeSize()">ChangeSize</button>
  </div>
  <div class="bottomBox">
  </div>
</div>

Answer 1

问题在于 footerBanner 容器没有任何限制。添加

.footerBanner img {
max-height:100%;
width:100%;
object-fit:cover;
}

解决了这个问题。