html - 溢出:隐藏不适用于完整的视口(viewport)部分

Question

我设置了几个具有全屏宽度和高度的部分。无论我将它们定位为绝对还是相对，溢出仍然不起作用。

DEMO

section {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#a {
  background: linear-gradient(1deg, #9f00b8, #2a032d);
  position: absolute;
}

#b {
  background: linear-gradient(1deg, #25cc00, #2a032d);
  left: 100vw;
  position: relative;
}

Answer 1

更改您的 height: 100vh; 和 width: 100vw;

像这样:

width: 100%;
height: calc(100% - 0px);
// height: 100vh;
// width: 100vw;

并更改以下行:

#b {
  background: linear-gradient(1deg, #25cc00, #2a032d);
  //left: 100vw;
   left: 100%;
  position: relative;
}

所以我认为 calc 是您的解决方案，也许还有其他一些解决方案。现在您需要浏览器支持计算。

width: -webkit-calc(100% - 0px);
width: -moz-calc(100% - 0px);
width: calc(100% - 0px);
height: -webkit-calc(100% - 0px);
height: -moz-calc(100% - 0px);
height: calc(100% - 0px);

希望对您有所帮助。

工作 fiddle

如果您想将 vh 与 calc() 一起使用，您可以查看此答案 It is possible to use vh minus pixels in a CSS calc()?