Question

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

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

如果没有，是否还有其他CSS方法可以实现这种预期效果？

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

稍微解释一下，我只能控制幻灯片的CSS，我需要将幻灯片div内的元素推到div之上，但overflow: hidden值是div当我这样做时，切断这个推高了overflow: hidden。我当然可以完全删除{{1}}但是那不能用于非常好的幻灯片演示！

下面列出了一个小提琴：

https://jsfiddle.net/ejhyz7t3/

Answer 1

根据问题中的示例，下面的jsfiddle提供了使用clip仅切断底边的所需效果：

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

以下复制完整代码以供参考：

<强> HTML

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

Answer 2

我有一个类似的问题，我有一个可拖动的div，我想要向右/向下溢出，但不是向上/向左。我通过调整z-index解决了这个问题。容器div为z-index：0px;可拖动的z-index：500px;和顶部和左边的div（菜单）到z-index：1000px;。这有效地夹住了可拖动的层，允许在我想要的方向上溢出。

Answer 3

.mydiv {  
    clip: rect(-100px, -100px, auto, -100px);  
}

将剪辑rect的底部设置为auto之类的overflow: hidden剪辑。 -100px值是任意选择的，以便为溢出留出一些空间。

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

3 个答案: