时间戳

首页 > 解决方案 > display:grid 是否可以在父级上使用 100% 的高度？

html - display:grid 是否可以在父级上使用 100% 的高度？

问题描述

为什么不显示：网格将我的内容拉伸到此列的高度？html 结构行 - col-6 是用引导程序制作的。我知道我可以为父容器添加一个特定的高度，但我不想要这个。有没有办法在上面使用 100% 的高度？

HTML：

<div class="row">
<div class="col-6">
Some content here
</div>
<div class="col-6">
        <div class="grid-container">
        <div class="Area-1">
                <h4>Area 1</h4>
                <p>area 1</p>
        </div>
        <div class="Area-2">
                <h4>Area 2</h4>
                <p>area 2</p>
        </div>
        <div class="Area-3">
                <h4>Area 3</h4>
                <p>area 3</p>
        </div>
        <div class="Area-4">
                <h4>Area 4</h4>
                <p>area 4</p>
        </div>
        <div class="Area-5">
                <h4>Area 5</h4>
                <p>area 5</p>
        </div>
        <div class="Area-6">
                <h4>Area 6</h4>
                <p>area 6</p>
        </div>
        </div>
</div>
</div>

CSS：

 .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 15px 15px;
    grid-template-areas: "Area-1 Area-4" "Area-1 Area-4" "Area-1 Area-5" "Area-2 Area-5" "Area-2 Area-6" "Area-3 Area-6" "Area-3 Area-6";
}

.Area-1 { grid-area: Area-1;}

.Area-2 { grid-area: Area-2; }

.Area-3 { grid-area: Area-3; }

.Area-5 { grid-area: Area-5; }

.Area-4 { grid-area: Area-4; }

.Area-6 { grid-area: Area-6; }

标签： htmlcssheightcss-griddisplay

解决方案

您可以将高度添加到.grid-container类似内容中：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 15px 15px;
  grid-template-areas: "Area-1 Area-4" "Area-1 Area-4" "Area-1 Area-5" "Area-2 Area-5" "Area-2 Area-6" "Area-3 Area-6" "Area-3 Area-6";
  border: 1px solid black;
  height: 100vh;
}

这将使grid-container视图的整个高度。

推荐阅读