文章/答案/技术大牛

发布

问集装箱的最大高度？
EN

Stack Overflow用户

提问于 2022-09-01 18:23:53

回答 1查看 49关注 0票数 0

我在使用CSS或HTML开发我的第一个基于网格的网站时遇到了一个问题。我在网上浏览了一段时间，但什么也找不到。我可能没有意识到这一点，也许这是一个新的初级问题。

虽然这可能不是构建网站最有效的方法，但我有一个18行网格容器。我去加了第十九页，但是当我向下滚动到它时，它没有出现。我检查了网站，它在那里，突出显示，但我不能滚动到它，因为我真的不能解释它更多，请告诉我，你想要查看的CSS的哪一部分。尽管我对CSS和HTML有相当多的了解，但我认为我需要一些帮助。

下面是用于容器的CSS：

.container {
    height: 250vh;
    display: grid;

    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.75fr 0.55fr 0.5fr 0.25fr 1fr 0.25fr 0.65fr 0.2fr 0.65fr 0.25fr 0.45fr 0.65fr 0.25fr 0.45fr 0.65fr 0.25fr 0.45fr 0.25fr;
    grid-gap: 20px;
}

下面是我为第19行使用的CSS：

.style-3 {
    background-image: url(../images/style-3.png);
    background-repeat: repeat-x;
    background-position: top;
    background-size: contain;
}  

.style-3.style-right {
    grid-column-start: 1;
    grid-column-end: 2;  
}

下面是我为第19行使用的HTML：

            <div class="style-3 style-right"></div>
            <div class="style-3 style-left"></div>

下面是我为主体使用的CSS：

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
}

我尝试过的补救措施包括更改div，将容器的分布从"fr“更改为"px”，更改容器的高度，以及许多其他方面和方法。

现在，关于一个次要的问题：是否有一个最大的容器高度或行号，在它断裂之前你可能会超过它？，您对我如何绕过这个问题并使它更有效有什么建议吗？，还是有一个解决方案来解决我前面提到的问题。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-01 18:51:13

您将容器高度硬编码为250 why，这就是为什么不能在此高度之后向下滚动的原因。可以更改容器高度以查看最后一行。

编辑:请在css中添加网格模板中的第19行.container。

.container {
  height: auto; // or something greater than 250vh

  grid-template-rows: 0.75fr 0.55fr 0.5fr 0.25fr 1fr 0.25fr 0.65fr 0.2fr 0.65fr 0.25fr 0.45fr 0.65fr 0.25fr 0.45fr 0.65fr 0.25fr 0.45fr 0.25fr 1fr; // add your 19th row here
 }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73573930

复制

相似问题

问集装箱的最大高度？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问集装箱的最大高度？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问集装箱的最大高度？
EN