CSS技术问询：网格下方出现空白的原因排查

问题根源 #

1. 固定容器高度：.cardcontainer 设置了 height:125vh，强制容器占满125%视口高度，就算内容没这么高，也会留下多余空白。
2. 绝对定位脱离文档流：.card 用了 position:absolute，导致父容器 .cardcontainer 无法根据网格内容自动计算高度，固定的125vh高度直接造成下方空白。
3. CSS语法错误：媒体查询的大括号没闭合，可能导致样式解析异常，影响布局稳定性。

修复方案 #

修改后的代码如下：

CSS

<style type="text/css">
.cardcontainer {
    /* 改用min-height保证至少占满视口，内容超出时自动撑开 */
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* 加上这个让网格垂直居中 */
}
.card {
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    /* 移除绝对定位，让容器感知内容高度 */
    display: grid;
    gap: 20px 50px; /* 增加垂直gap，优化内容间距 */
    padding: 100px;
}
.card .card-item {
    position: relative;
}
.card img {
    height: 250px;
    width: 300px;
    transition: 0.4s ease-in-out all;
}
.card .card-details {
    position: absolute;
    padding: 10px 5px;
    bottom: 0px;
    opacity: 0;
    transition: 0.4s ease-in-out all;
}
.card-details h1 {
    font-size: 18px;
    color: white;
    margin: 2px 0;
}
.card-details p {
    font-size: 14px;
}
.card-item:hover .card-details {
    opacity: 1;
    bottom: 10px;
}
.card-item:hover img {
    transform: scale(1.05);
}
@media(max-width:600px) {
    .card {
        grid-template-columns: 1fr;
        gap: 20px 10px; /* 同步调整移动端垂直gap */
    }
} /* 补充闭合大括号 */
</style>

HTML

<div class="cardcontainer">
<div class="card">
<div class="card-item"><img alt="" src="/content/Banana.png" style="width: 400px; height: 300px;" />
<div class="card-details">
<h1>Banana</h1>
</div>
</div>

<div class="card-item"><img alt="" src="/content/Apple.png" style="width: 400px; height: 300px;" />
<div class="card-details">
<h1>Apple</h1>
</div>
</div>

<div class="card-item"><img alt="" src="/content/Oranges.png" style="width: 400px; height: 300px;" />
<div class="card-details">
<h1>Oranges</h1>
</div>
</div>
</div>
</div>

关键调整说明 #

• 把 height:125vh 换成 min-height:100vh，既保证容器至少铺满屏幕，又不会强制超出内容高度。
• 移除绝对定位后，.cardcontainer 会根据网格内容自动计算高度，不会出现多余空白。
• 补充媒体查询的闭合大括号，避免CSS解析错误。
• 增加垂直方向的 gap，让内容布局更合理，不会显得拥挤。

内容的提问来源于stack exchange，提问作者banhbao