如何在使用动态身高父母时阻止儿童剪裁？

Question

我制作了一个这样的面板盒：

HTML

<section class="panel">
    <div class="title">Hot</div>

    <div class="content">
        <a href="">Article</a>
        <a href="">Article</a>
        <a href="">Article</a>
        <a href="">Article</a>
        <a href="">Article</a>
        <a href="">Article</a>
    </div>
</section>

CSS

#body #rightPanel .panel {
    width: 220px;
    height: calc((100% - 160px) / 2);

    overflow: hidden;
}

#body #rightPanel .panel .content {
    width: calc(100% - 2px);
    height: calc(100% - 34px);
}

#body #rightPanel .panel .content a {
    width: 100%;
    height: 27px;
    display: block;
}

面板根据视口大小具有动态大小，并且非常符合我的要求。但是如果你看下面的图像，你会发现明显的问题：最后一个元素被剪裁了。

如果可以完整显示子元素，我该如何只显示？对孩子们来说是一种全有或全无？

我想要一个纯CSS解决方案，但我不介意使用一些JS / jQuery。

修改

任何人都应该在这里绊倒并寻找答案：亚当的答案有效，但最终裁剪了一个比需要更多的元素。我将他的代码略微简化为：

function resizePanelArticles() {
    var panelHeight = $(".content").height();
    $("a").show().each(function() {
        if ($(this).position().top > panelHeight) {
            $(this).hide();
        }
    });
}

Answer 1

我可以考虑在没有javascript的情况下执行此操作的唯一方法是将height: calc((100% - 160px) / 2);更改为min-height: calc((100% - 160px) / 2);。这并不是你想要的，因为它会为其余的人留下足够的空间而不是将它们剪掉，但它是我能想到的唯一的唯一方式。

这可以通过javascript轻松完成。基本上我们遍历每个a元素并使用$(this).position().top + $(this).outerHeight()获取元素底部的位置，并针对容器进行检查。我们也在窗口加载和窗口大小调整上这样做，这是因为它是一个动态高度所以它会改变，这意味着如果调整窗口大小，它将不得不重新计算。

function resize(){
    var c = $('.panel .content').innerHeight();
    $('.panel .content a').show().each(function(){
        if($(this).position().top + $(this).outerHeight() > c){
            $(this).hide();
        }
    });
}

$(window).on('load resize', resize);

DEMO