gpt4 book ai didi

css - 网格布局 : cell isn't covering all specified rows

转载 作者:行者123 更新时间:2023-11-28 10:25:38 26 4
gpt4 key购买 nike

<分区>

谁能帮我弄清楚为什么 .side 没有覆盖以下代码段中的第三行? (另外,为什么第三行这么向下会产生一个垂直滚动条?)

很抱歉问什么可能是一个非常基本的问题,这是一个业余元素,我自己通常不做 CSS,只是想学习网格,因为它对我来说是最自然的。

注意:我猜 grid-row: 2 等同于 grid-row: 2/2 (其余部分相同)但我只是明确地写了它100% 确定(没有区别)。

.layout {
display: grid;
height: 100vh;
grid-template-rows: 50px 1fr 50px;
grid-template-columns: 250px 1fr;
}

header {
grid-row: 1 / 1;
grid-column: 2 / 2;
background-color: #ccf;
}

.side {
grid-row: 1 / 3;
grid-column: 1 / 1;
background-color: #ddd;
}

.main {
grid-row: 2 / 2;
grid-column: 2 / 2;
}

footer {
grid-row: 3 / 3;
grid-column: 2 / 2;
background-color: #ccf;
}
<div class="layout">
<header>header</header>
<div class="side">side</div>
<div class="main">main</div>
<footer>footer</footer>
</div>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com