div溢出并在扩展高度时覆盖下一个div

Question

我在一个页面上有几个div，每个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应用于其父级，以将其展开以适应。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;