css - 我需要剪辑或隐藏溢出它的内容，但仅限于一侧

Question

我有一个带有单个子 DIV 的 DIV，它可能会或可能不会在其父级的多个侧面溢出。我需要能够隐藏溢出父母底部边缘的孩子的任何部分，但允许在所有其他方面溢出。

这是一张有助于解释的图表：

我一直在查看clipCSS 属性，但无法将其击败，主要是因为它不接受百分比，而且这个孩子没有静态高度/宽度。此外，当将鼠标悬停在父级上时，子级将进行动画处理，从一个位置移动到另一个位置。让事情变得有点棘手。

建议？

注意 我的目标是不为样式添加无关的标记。这个特定站点在语义级别上必须是可靠的，因为它适用于一所大型学校，因此添加额外的包装器 div 来实现这一点并不理想。

Answer 1

如果您可以再使用一个父 div，我可以使用以下方法获得类似的结果。

CSS：

    #grandparent{
        overflow: hidden
    }
    #parent {
        background-color: #600;
        width: 200px;
        height: 200px;
        padding-top: 30px;
        text-align: center;
        margin: 0 auto;
        position: relative
    }
    #child {
        background-color: #090;
        width: 100%;
        height: 300px;
        margin: 0 auto;
        position: absolute;
        padding: 0 1.5em;
        margin-left: -1.5em;
    }

标记：

    <div id="grandparent">
      <div id="parent">
         <div id="child">Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum</div>
      </div>
    </div>