css - 溢出隐藏在 css 的下方而不是顶部

Question

overflow-y:hidden 将隐藏上半部分和下半部分的 View 。我们可以只显示上半部分而不显示下半部分吗？现在我喜欢这样的 overflow-y-top:visible;溢出-y-底部:隐藏；
同样 overflow-x-left:visible;overflow-x-right:hidden
那么我们可以在 css 中做些什么吗？

我的具体问题:

HTML:

<div id="main">
   <div id="arrow">▲</div>
   <div id="content">id="toggle_view">view more</div>
   <div id="content1"> this is any thext</div>
   <div id="content2"> this is any thext</div>
   <div id="content3"> this is any thext</div>
   <div id="content4"> this is any thext</div>
</div>

CSS:

#main {overflow-y:hidden;height:100px;position:relative}
#arrow {position:absolute;top:-30px;}
#toggle_view{position:absolute;right:0;bottom:0;}

现在我想让内容隐藏而不是箭头。那么是否有一些技术可以使 div 的下方部分隐藏而不是顶部？

Answer 1

您可以在元素的顶部添加填充以显示您想要显示的内容，然后可以使用 javascript 更改为您需要的内容。如果我理解正确的话，你正在寻找的是始终显示箭头/viewmore。所以添加一个 padding-top: 20px; 或任何你喜欢的测量单位都可以

我在这里添加了一些简单的 javascript 只是为了让它工作。你可能想要动画等等......

查看这个 jsfiddle: http://jsfiddle.net/KPbLY/85/

要让背景不进入填充(如评论中所述)，请使用另一个嵌套的 div，例如:

http://jsfiddle.net/KPbLY/87/