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

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);。这不完全是你想要的，因为它会为剩余的空间留出足够的空间而不是切断它们，但它是唯一我能想到的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