Css网格行垂直溢出其容器

CSS grid row overflows its container vertically(Css网格行垂直溢出其容器)

本文介绍了Css网格行垂直溢出其容器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我希望在页面上有一个网格布局,其中网格延伸到整个视区,并且行具有最小高度。最简单的示例是包含单个单元格的网格(请参阅下面的代码片段)。

我遇到的问题是,当视区的高度小于定义的最小行高时,该行垂直溢出其容器。在下面的示例中添加了红色和绿色边框,可见行的高度不会低于定义的500像素,但网格容器的大小仍然调整为现在小于500像素的视区。

如果我从grid类中删除heightcss属性,容器不会缩小到其内容以下,但当视区高度超过500像素时,它也不会填充垂直空间。因为我希望网格填充整个页面,所以我需要heightcss属性。我还添加了min-height: fit-content属性,该属性应防止height属性的使用值小于为min-height指定的值,但它不起作用(不是使用定义的fit-content值--它使用精确的值,例如300px)。

在类似的question中,罪魁祸首是用于间隙的百分比值,但在本例中没有相对大小的值。即使将grid-template-rows: minmax(500px, 1fr);属性替换为固定的grid-template-rows: 500px;属性,它的行为方式仍然相同。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
body {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-rows: minmax(500px, 1fr);
  height: 100vh;
  min-height: fit-content;
  width: 100vw;
}

.bordered {
  border: 10px solid green;
}
<div class="grid bordered" style="border-color: red;">
  <div class="bordered">Some content</div>
</div>

我想要的是一个网格,填充整个视区,网格容器永远不会小于它的内容。我错过了什么?

推荐答案

要知道的是,只要一行的最小高度,或多行的组合高度大于视区的高度,您就会有一个滚动。除此之外,我希望下面的片段能做你想要的事情。我在代码中添加了注释。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
/* lines I added */
*{
  box-sizing: border-box;
}

body {
  margin: 0;
}
 
.grid {
  display: grid;
  /* 100 is for the small viewport here in the code snippet */
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  min-height : 100vh;
  
}

.bordered {
  border: 10px solid green;
}
<div class="grid bordered" style="border-color: red;">
  <div class="bordered">Some content</div>
</div>

这篇关于Css网格行垂直溢出其容器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Css网格行垂直溢出其容器

基础教程推荐