如何用CSS绝对定位元素使其部分出屏且不显示垂直滚动条

下面是几个实用的解决思路，直接就能落地：

方法一：给容器添加overflow: hidden #

这是最直接的方案。你的容器高度已经设为100vh，只要给容器加上overflow: hidden，容器内部超出的部分会被直接裁剪，浏览器不会因此出现滚动条。记得先给容器设置position: relative，这样装饰元素的绝对定位才会相对于这个容器生效。

示例代码：

.container {
  height: 100vh;
  position: relative;
  overflow: hidden; /* 核心属性 */
}

.decoration {
  position: absolute;
  bottom: -50px; /* 让元素下半部分超出容器底部 */
  left: 0;
  width: 100%;
  height: 200px;
  background: #ccc;
}

方法二：用clip-path裁剪容器可见区域 #

如果需要更灵活的裁剪效果（比如非矩形的可见区域），可以用clip-path定义容器的显示范围，超出这个范围的装饰元素会被隐藏，同样不会触发滚动条。

示例代码：

.container {
  height: 100vh;
  position: relative;
  clip-path: inset(0 0 0 0); /* 裁剪为容器本身的矩形区域 */
}

.decoration {
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 200px;
  background: #ccc;
}

方法三：配合pointer-events: none优化交互（可选） #

如果你的装饰元素不需要响应任何鼠标事件（比如点击、hover），可以给它加上pointer-events: none，这样即使元素被裁剪，也不会干扰用户对页面其他内容的操作，体验更流畅。

示例代码：

.container {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.decoration {
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 200px;
  background: #ccc;
  pointer-events: none; /* 让元素不接收鼠标事件 */
}

内容的提问来源于stack exchange，提问作者Kris Hunt