jquery - 使用动态高度 parent 时如何阻止 child 剪裁？

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

面板具有根据视口(viewport)大小的动态大小，并且可以按照我想要的方式工作。但是，如果您查看下图，您会注意到一个明显的问题:最后一个元素被剪掉了。

只有可以完整显示的子元素怎么才能只显示？对 child 来说是一种全有或全无的游戏？

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

编辑

是否有人会在这里跌跌撞撞地寻找答案:Adam 的答案有效，但最终多裁剪了一个超出需要的元素。我将他的代码略微简化为:

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);。这不是您想要的，因为它会为其余部分腾出足够的空间而不是将它们切断，但这是我能想到的唯一的 css 方式。

虽然这可以很容易地用 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