javascript - 如果被父元素“剪切”且隐藏了溢出，则删除子元素

我在做一个页面，左边应该有内容，右边应该有广告。左侧div的高度未知。我想在右侧添加尽可能多的商业div，而不会使右侧的高度高于左侧。
我设置了右侧div高度等于左侧高度，然后在右侧div上添加了overflow: hidden，这样商业div就被切断了。我不想我的商业部门被切断，所以我想删除一个正在被切断。
这是我的代码https://jsfiddle.net/p9dmzoa3/

最佳答案

您可以尝试下面的代码，这将删除所有的商业广告DIV，它们将被切断：

$(document).ready(function() {
   $(".right_side").css("height", $(".left_side").height());
   $commercialDivs = $(".right_side").children("div.commercials");
   $rightSideDivHeight = $(".right_side").height();
   $tempHeight = 0;
   for(var i=0;i<$commercialDivs.length;i++){
        $tempHeight += $commercialDivs[i].clientHeight;
    if($tempHeight>$rightSideDivHeight){
        $commercialDivs[i].remove();
    }
   }
 });