html - 如何 overflow hidden "at the top"？

Question

有没有办法在“顶部”而不是“底部”隐藏 div 的溢出？

这jsFiddle说明了我的意思。封闭的 div 有 overflow-y:hidden，但这会隐藏其内容的下半部分。我想隐藏它的上半部分。

---

_{强制性源代码(来自 jsFiddle 的逐字记录):}

*{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}
*{margin:0;padding:0;border:0;}
#centered{
  margin:20px auto 0;
  overflow-y:hidden;
  height:150px;
  outline:5px solid green;
}
#centered,
#top,
#bottom{width:150px;}
#top   {height:120px;background-color:red;}
#bottom{height:150px;background-color:#555;}
#top,#bottom{
  color:white;
  text-align:center;
  padding:0 10px;
}
#top{padding-top:50px;}
#bottom{padding-top:60px;}

<div id="centered">
  <div id="top">
    this div should be "overflowed away"
    <em>at the top!</em>
  </div>
  <div id="bottom">
    this content should show
  </div>
</div>

Answer 1

查看此 FIDDLE ，您需要将内容包装在 absolute 定位的 DIV 中，并将 bottom 设置为 0，同时父容器的位置为 relative

HTML

<div id="centered">
    <div id='content'>
        <div id="top">this div should be "overflowed away" <em>at the top!</em>

        </div>
        <div id="bottom">this content should show</div>
    </div>
</div>

CSS

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
#centered {
    margin:20px auto;
    overflow-y:hidden;
    height:150px;
    border:5px solid green;
    width:150px;
    position:relative;
}
#content {
    bottom:0px;
    position:absolute;
}
#top {
    min-height:120px;
    background-color:red;
    padding-top:50px;
}
#bottom {
    background-color:#555;
    padding:60px 10px 0 0;    
}
#top, #bottom {
    color:white;
    text-align:center;
}