CSS样式,100%/ 100vh不会覆盖通过视图的高度

灰尘男孩

在下面图像的底部,背景颜色并未完全达到。我尝试将其设置为,100vh and 100%但结果是相同的,即它最多只能覆盖100个视图高度,并且任何滚动下来的东西都可以通过100vh。没有被我的背景色覆盖。我怎样才能解决这个问题?

    &__container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba($color: #13182c, $alpha: 0.7);
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

在此处输入图片说明

约翰尼斯

您应该发布完整的代码。

但是您发布的图像看起来像是该页面向下滚动了一点(覆盖图后面的导航项被切除了)。您正在使用position: absolute,它与下一个相对位置较高的元素一起移动,或者-如果没有,则与一起移动body这可以解释问题。主体会滚动,覆盖层会沿着窗口移动,但只能与窗口一样高,但是由于主体较高,因此覆盖层下方有一些空间...

要解决此问题,请尝试使用position: fixed代替position: absolute在这种情况下,覆盖位置将与视口本身(即窗口)有关。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

100vh不会使列高度达到100%

CSS 100vh未将div设置为100%高度

容器超过其高度100vh

Firefox Mobile和高度100vh

将HTML和BODY选择器的样式设置为高度:100%;与使用100vh

为什么这个高度为100vh的div无法覆盖整个视口?

Css:体高=100%的样式页脚

即使父级的高度设置为`100vh`,子元素也不会包含在视口高度中

高度:100vh;并在较小的屏幕上溢出“内容”

Height 100vh - JavaScript 中其他元素的高度

如果页面上的其他内容导致滚动,则高度为 100vh 的侧边栏不会填满页面

CSS视口高度:100vh无法正确处理div中的内容

平板电脑/手机中的错误,css 100vh高度不起作用

CSS(尾风)网格高度 100vh 不起作用

为什么即使高度为100%,高度为100vh,也无法获得完整的页面?

CSS`height:calc(100vh);`vs`height:100vh;`

我该怎么做背景视频宽度100%和高度100vh

高度:当父项的高度为100vh时,自动在flex项目上

如何使用CSS在iOS上访问真实的100vh

Flexbox和100vh高度:内容过多时页脚消失

保证金使Bootstrap 5柱高度超过100vh

在父级中保持100vh高度,并发生溢出

我如何使它成为高度:在移动和/或滚动状态下为100vh

溢出时如何滚动底部:y:滚动和高度:100vh

最小高度100vh会创建垂直滚动条,即使内容小于视口

标题部分中的 href 不充当链接,并且垂直高度不是 100vh

html将高度视频裁剪为100vh,将视频裁剪为全屏

当父母的身高为100vh时将高度设置为自动

使用 100vh 时,移动浏览器错误地设置了最大高度