Question

我有一个设置，其中有几个部分具有全屏宽度和高度。无论我将它们置于绝对位置还是相对位置，溢出仍然无法正常工作。

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是你的解决方案，也许还有其他一些解决方案。现在您需要浏览器支持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()?

溢出：隐藏不适用于完整视口部分

1 个答案: