如何解决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 举报,一经查实,本站将立刻删除。