Html 100vh-不覆盖整个屏幕

谢谢大家考虑帮助我

所以我做了一个网格布局，在其中一个

中，我将图像设置为

100vh

。

没有设置为

100vh

，但我想看看如果我将图像设置为

100vh

会发生什么。 从我的理解来看，我应该选择所有的视角高度

但正如我惊讶地发现的那样，图像并不是碰巧是

100vh

图像仍然留在容器内。 我再次提醒-容器没有设置为

100vh

，只有里面的图像。 关于容器，有一个

，根据我的想法，

100vh

图像将“打破”容器并超过它

为什么没有发生

为什么尽管我对

中的

进行了

100vh

操作，但图像并不是视口的全部高度

编辑- 我试图将我的

定位到网格的第一行，结果成功了。 我的图像是

100vh

当对div内的元素使用

vh

时，它必须是第一行？ 谢谢

我指的是侧边栏img- 此图像位于#侧边栏中 当我对图像进行100vh设置时，它并没有占用所有的查看端口

img {
    display: block;
    width: 100%;
   height: auto;
}
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
    grid-template-areas: 
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content1 content2 content3"
    "sidebar footer footer footer"
    ;
    grid-gap: 20px;
    height: 100vh;
    
}

nav {
    background: #a7ffeb;
    grid-area: nav;
    display: flex;
    justify-content: space-around;
}
nav ul {
    display: flex;
    align-items: center;
}
nav ul li {
    padding: 0px 10px;
    list-style: none;
}

main{
    background: #84ffff;
    grid-area: main;
    display: flex;
    align-items: center;
}


#sidebar {
    background: #18ffff;
    grid-area: sidebar;
    display: grid;
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    
}

#sidebar img {
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
}

---

你能给我们看一些代码吗？喜欢css代码吗？并没有理由不工作，所以请创建一个issue@Ifaruki我加了一句。@AlonEitan你好，亲爱的，ma kore？如前所述，我将图像iside作为标记，div是网格的一部分。网格上方有一个导航栏。当将中的图像设置为100vh时，它没有覆盖导航部分（应该如此，因为它支持所有视口）。