jquery - 扩展高度时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给他们的 parent 扩大它以适应。

.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>