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

Question

我正在制作一个页面， 左侧应该有内容，右侧 是divs中的广告 。 左侧div的高度未知。 我想在右侧添加尽可能多的商业div，而不会使右侧的高度高于左侧的高度。

我将右侧div的高度设置为等于左侧的高度，然后添加了overflow: hidden在右侧div中，以便切断商业div。 我不想裁掉我的商业div，所以我想删除被裁掉的那个。

这是我的代码https://jsfiddle.net/p9dmzoa3/

Answer 1

这样的事情应该可以做。

  $(document).ready(function() { $(".right_side").css("height", $(".left_side").height()); var j = $(".right_side").children("div").length; for (var i = 1; i < j; i++) { if ((($('.right_side').offset().top + $(".right_side").height()) - ($('.right_side div:last-child').offset().top + $(".right_side div:last-child").height())) < 0) { $(".right_side div:last-child").remove(); } else { break; } } }); 

 div.left_side { display: inline-block; } div.right_side { display: inline-block; float: right; overflow: hidden; } div.left_side_content { height: 30px; margin-top: 10px; background-color: green; } div.commercials { height: 50px; margin-top: 10px; background-color: forestgreen; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content" style ="width: 430px; background-color: lightblue; padding: 5px;"> <div class="left_side" style ="width: 200px; background-color: tomato; padding: 5px;"> <div class="left_side_content">content</div> <div class="left_side_content">content</div> </div> <div class="right_side" style ="width: 200px; background-color: orange; padding: 5px;"> <div class="commercials">commercials</div> <div class="commercials">commercials</div> <div class="commercials">commercials</div> <div class="commercials">commercials</div> <div class="commercials">commercials</div> <div class="commercials">commercials</div> </div> </div> 

Answer 2

您可以尝试以下代码，这将删除所有已截止的广告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();
    }
   }   
 });