div溢出，並覆蓋下一個div時擴大高度

Question

我有幾個div在一個頁面上，每個都有一個「查看更多詳細信息」鏈接。點擊後，div展開並應填充父div的高度，而不會出現問題。然而，每個div溢出到下一個父div直到我滾動，然後調整。我如何讓div的增長沒有溢出？

發生了什麼現在

我希望發生的

$(function() { 
 
    var minHeight = null; 
 
    var expCb = function($el) { 
 
    $el.addClass('expanded'); 
 
    $el.find('.expand-details').text('Details -'); 
 
    }; 
 
    var collapseCb = function($el) { 
 
    $el.removeClass('expanded'); 
 
    $el.find('.expand-details').text('Details +'); 
 
    }; 
 
    $('.details-content a.expand-details').click(function() { 
 
    var currentCb = $(this).parent().hasClass('expanded') ? collapseCb : expCb; 
 
    currentCb($(this).parent()); 
 
    updateCardDetailsLockups(); 
 
    return false; 
 
    }); 
 
});

.details-content { 
 
    max-height: 18px; 
 
    overflow-y: hidden; 
 
} 
 

 
.details-content.expanded { 
 
    max-height: 2000px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent1"> 
 
    <div class="child col1"> 
 
    <div class="details-content"> 
 
     <a href="#" class="details-header expand-details">details +</a> ... 
 
    </div> 
 
    </div> 
 
    <div class="child col2"> 
 
    ... 
 
    </div> 
 
</div> 
 

 
<div class="parent2"> 
 
    <div class="child col1"> 
 
    <div class="details-content"> 
 
     <a href="#" class="details-header expand-details">details +</a> ... 
 
    </div> 
 
    </div> 
 
    <div class="child col2"> 
 
    ... 
 
    </div> 
 
</div>

Answer 1

我想我們需要更多的信息來幫助你，但我懷疑你的.col1和.col2類別具有其float屬性集。您需要將clearfix應用到他們的父母，以將其展開以適合他們。

.details-content { 
 
    max-height: 18px; 
 
    overflow-y: hidden; 
 
} 
 

 
.details-content.expanded { 
 
    max-height: 2000px; 
 
    display:block; 
 
} 
 

 
.parent1 { border: 4px solid orangered; /* for visibility */ } 
 
.parent2 { border: 4px solid teal; /* for visibility */ } 
 
.col1 { float: left; /* assuming this is the case */ } 
 

 
/* Here is the clearfix, apply it to your container */ 
 
.with-clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="parent1 with-clearfix"> 
 
    <div class="child col1"> 
 
     <div class="details-content expanded"> 
 
      <p>With clearfix, the parent container is sized based on its floating children. You can see the red-orange border surrounding the content.</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="parent2 without-clearfix"> 
 
    <div class="child col1"> 
 
     <div class="details-content expanded"> 
 
      <p>Without clearfix, the teal border is collapsed and the children are spilling out of the parent. A clearfix is needed to size the parent to its children.</p> 
 
     </div> 
 
    </div> 
 
</div>