如果被隐藏溢出的父元素 "cut" 移除子元素

Question

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

我已将右侧 div 高度设置为等于左侧高度，然后我在右侧 div 添加了 overflow: hidden 以便商业广告 div s 被切断了。我不希望我的广告 div 被截断，所以我想删除被截断的那个。

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

如果被隐藏溢出的父元素 "cut" 移除子元素

Remove child element if being "cut" by parent element with overflow hidden

html

javascript

css

jquery

overflow