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"
  }

我只是具有常规内容的行大小。

在“功能”下，我有一个导航，您可以在各种不同的视图（产品功能，规格和评论）中进行过滤。

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

这是在Shopify中构建的，这里是一个链接，也可以查看我在指的是什么。

https://rq852rt3ja4kgxnq-11502512.shopifypreview.com

您必须进入移动视图才能查看该错误。我认为必须考虑到重新加载和分页，才能使下一个页面视图的高度更大或更短。

我尝试通过在某些行上设置'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;
}

解决了问题。

CSS网格在下一页视图中损坏

1 个答案: