使用overflow-y:hidden或overflow-x:hidden仅隐藏元素的一侧

Question

标题几乎问了这个问题,但我知道使用overflow-y: hidden,overflow-x: hidden你可以隐藏元素的顶部和底部或左侧和侧面但是有一种方法只能使用这些选择器隐藏一侧.

特别是我有兴趣隐藏一个溢出但不是顶部的div的底部.

如果没有,是否有任何其他CSS只能实现这种预期的效果？

有一个合法的目的需要这个,我想看看是否有一种标准的方法来做到这一点.

为了稍微解释一下,我只是控制幻灯片的CSS,我需要将幻灯片中的元素推div到上面,div但是当我这样做时,overflow: hidden值会切断这个推高div.overflow: hidden当然,我可以完全删除,但那不是一个非常好的幻灯片!

下面是一个小提琴:

https://jsfiddle.net/ejhyz7t3/

Answer 1

下面的 jsfiddle 基于问题中的示例，提供了使用以下命令仅切除底部边缘的所需效果clip：

https://jsfiddle.net/ejhyz7t3/2/

完整代码复制如下，供参考：

超文本标记语言

<div class="outer-container">
   <div class="inner-container">
   </div>
</div>

CSS

.outer-container {
  background: red;
  height: 100px;
  margin-top: 100px;
  width: 150px;
  padding-left: 50px;
}

.inner-container {
  background: green;
  height: 200px;
  width: 100px;
  transform: translateY(-50px);
  position: absolute;
  clip: rect(0, 100px, 150px, 0);
}