标题几乎问了这个问题但是我知道使用overflow-y:hidden和overflow-x:隐藏你可以隐藏元素的顶部和底部或左边和侧面但是有一种方法只能隐藏一边使用这些选择者.
特别是我有兴趣隐藏一个溢出但不是顶部的div的底部.
如果没有,是否有任何其他CSS只能实现这种预期的效果?
有一个合法的目的需要这个,我想看看是否有一种标准的方法来做到这一点.
为了稍微解释一下,我只能控制幻灯片的CSS,我需要将幻灯片div中的一个元素推到div上方,但是溢出:隐藏值会在我执行此操作时切断这个推升的div.我可以删除溢出:当然完全隐藏,但那不是一个非常好的幻灯片!
下面是一个小提琴:
解决方法
基于问题中的示例的下面的jsfiddle提供了使用剪辑仅切除底边的期望效果:
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); }