100vh-不能覆盖整个屏幕

问题描述

感谢大家考虑帮助我！

因此，我进行了网格布局，并在其中一个<div>中将图像设置为100vh。 <div>未设置为100vh，但是我想看看如果将图像设置为100vh会发生什么。据我了解，我应该承担所有的视线高度。

但是令我惊讶的是，图像并非恰好是100vh。

图像仍留在容器内。我再次提醒-容器未设置为100vh，仅设置了其中的图像。关于容器，有一个<nav>，根据我的想法，100vh图像将“脱离”容器并超出容器。

为什么没有发生？

为什么我在100vh内对<img>进行了<div>的操作，但是图像不是视口的全部高度？

编辑- 我试图将<div>定位在网格的第一行中，并且可以正常工作。我的图片是100vh。

在使用vh时，必须将div中的一个元素作为第一行？谢谢

我指的是#sidebar img- 此图片在#sidebar内当我将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;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

grid grid html viewport-units