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

【问题标题】：Overflow: hidden not working with full viewport sections溢出：隐藏不适用于完整的视口部分
【发布时间】：2026-02-15 19:05:02
【问题描述】：

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

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;
}

【问题讨论】：

“溢出仍然不起作用”是什么意思？
还是不清楚自己要做什么？您只想显示一个部分吗？或者别的什么...
我不希望它能够滚动。我想使用 jquery 动画来访问其他部分，否则我不希望它可见。
使用宽度：calc(100% - Xpx); , 高度: calc(100% - Xpx);
@DevStud 能否提供一个小演示，我从未使用过 calc

标签： html css overflow

【解决方案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()?

【讨论】：

@Shniper 我希望它会有所帮助。