如何解决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; }
解决方法
您可以将高度添加到.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
成为视图的整个高度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。