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>