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

如何隐藏“顶部”溢出？

1 个答案: