如何解决CSS Grid的高度大于其容器div的高度
我正在尝试制作网格，但是网格始终会溢出其内部的div。很简单，我不明白问题是什么。 div列具有背景颜色，因此您可以看到它的位置，但也可以在元素检查器中看到它。
我尝试了几种解决方案，并在网上查看，但找不到解决方案。这是我尝试过的方法以及为什么不起作用：
-
网格或列类上的
-
height:100%在底部添加了两个空网格单元格
列类上的 -
overflow:auto制作了滚动条 -
在底部创建
<br>的{{1}}没有任何作用
clear:both.column {
margin-top: 3%;
margin-left: 20%;
margin-right: 20%;
background-color: rgba(200,0.1);
}
.grid {
display: grid;
grid-template-columns: repeat( auto-fit,minmax(450px,1fr));
grid-auto-rows: (0px,1fr);
grid-gap: 2%;
}
.plum {
/* background-color: plum; */
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0.2);
transition: 0.3s;
border-radius: 10px;
background-color: rgba(0,0.1);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0.2);
}
.container {
padding: 2px 16px;
}
.container p {
word-wrap: break-word;
}
.centered {
text-align: center;
}解决方法
这是由grid-gap引起的。您使用的grid-gap: 2%;在列和行之间都应用了％的间隙。如我们所见，这非常适合网格本身，并且网格的总高度中包括两行之间的2％间隙。
但是using percentages for height is problematic在容器没有定义的高度时。此处发生的情况是容器无法识别间隙高度百分比，并且没有将其包括在总高度中。
您可以通过使用定义的高度值轻松修复它，例如
grid-column-gap: 2%; // you can still use % for the column gap
grid-row-gap: 20px; // fixed height for row gap
工作示例：
.column {
margin-top: 3%;
margin-left: 20%;
margin-right: 20%;
background-color: rgba(200,0.1);
}
.grid {
display: grid;
grid-template-columns: repeat( auto-fit,minmax(300px,1fr));
grid-auto-rows: (0px,1fr);
grid-column-gap: 2%;
grid-row-gap: 20px;
}
.plum {
/* background-color: plum; */
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0.2);
transition: 0.3s;
border-radius: 10px;
background-color: rgba(0,0.1);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0.2);
}
.container {
padding: 2px 16px;
}
.container p {
word-wrap: break-word;
}
.centered {
text-align: center;
}<body class="plum">
<br>
<div class="column">
<div class=" grid">
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: I like memes</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: I like memes again</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: this is a post</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: This is the first post from the website</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: I have added this</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: joe</p>
<p>Text: I'm joe</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: joe</p>
<p>Text: Okay</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: joe</p>
<p>Text: I like memes too</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: Caps test</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: OKAYYYYYYYYYYYYYYYYYYYYYYYY</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: sssssssssssssssssss</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: SSSSSSSSSSSSSSSSSS</p>
</div>
</div>
</div>
</div>
<p class="centered"><a href="submitform.php">Add new</a></p>
宽度：
使用％作为列间隙有时也会引起问题，如果使用％ad定义列，则不考虑间隙。
但是，您已经正确设置了列，这并不是导致网格在此处较小的屏幕上超出容器的原因。这是由于将最小网格设置为450px造成的：
grid-template-columns: repeat( auto-fit,minmax(450px,1fr));
大约300像素的值可能更合适，因为它将适合绝大多数移动屏幕（{320px通常被认为是可容纳的最小宽度，但也不要忘记元素外部的空白）。
.column {
margin-top: 3%;
margin-left: 20%;
background-color: rgba(200,1fr);
grid-gap: 2%;
}
.plum {
/* background-color: plum; */
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0.2);
}
.container {
padding: 2px 16px;
}
.container p {
word-wrap: break-word;
}
.centered {
text-align: center;
}<body class="plum">
<br>
<div class="column">
<div class=" grid">
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: I like memes</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: I like memes again</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: this is a post</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: This is the first post from the website</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: I have added this</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: joe</p>
<p>Text: I'm joe</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: joe</p>
<p>Text: Okay</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: joe</p>
<p>Text: I like memes too</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: Caps test</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: OKAYYYYYYYYYYYYYYYYYYYYYYYY</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: sssssssssssssssssss</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: SSSSSSSSSSSSSSSSSS</p>
</div>
</div>
</div>
</div>
<p class="centered"><a href="submitform.php">Add new</a></p>
从（.column）类中删除边距右移。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
