刪除子元素，如果被父元素「隱藏」溢出

我正在製作一個頁面，其中應該有內容在左側和divs在右側。左側div的高度未知。我想在右側添加儘可能多的商業廣告，而不會使右側的高度高於左側。刪除子元素，如果被父元素「隱藏」溢出

我已經設置了右側div高度等於左側高度，然後我在右側div上添加了overflow: hidden，這樣商業div就被切斷了。我不希望我的商業廣告被切斷，因此我想刪除正在被切斷的廣告。

2017-05-06 Night83

你可以試試下面的代碼，這將刪除所有這些廣告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(); 
    } 
    } 
});

來源

2017-05-06 14:27:44

感謝您的答案！如果我沒有添加更多內容，它效果很好。 https://jsfiddle.net/v5avmjs4/ – Night83

這是因爲在計算tempHeight時，我沒有考慮廣告div的邊距10px。請添加10，它會工作。即'$ commercialDivs [i] .clientHeight + 10' –

它的工作，非常感謝你！ – Night83

像這樣的東西應該做的事。

$(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) { 
 
    \t  $(".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>

來源

2017-05-06 14:23:32 Coli

這個工作好，如果我不添加更多商業廣告。增加更多的商業廣告使其無法再次發揮作用。 https://jsfiddle.net/bg7yfabp/ – Night83

Wupsie，https://jsfiddle.net/bg7yfabp/1/這個效果很好。我忘了保存索引（） – Coli

刪除子元素，如果被父元素「隱藏」溢出

回答

相關問題