两个 div 的高度等于主 div 的高度

Question

我的页面上有两个 div；侧面板和主面板。

在侧面板中，我总是会有一堆内容块，数字一直在变化。主面板会有一些内容块。通常侧面板的高度会大于主面板的高度。

我正在寻找与该面板中的内容相等的主面板高度，并且我正在寻找一种方法使侧面板的高度等于主面板的大小。而侧面板滚动溢出。我不想为任何一个设置静态高度，因为内容的数量会发生变化。

目前我正在使用网格，但如果有办法做到这一点，所有这些都是为了改变它。

这是我目前拥有的 Codepen 模型： https://codepen.io/aculbreth/full/VMjRyx

.box {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 20px;
  grid-auto-columns: max-content;
  background: #efefea;
  margin: 50px auto;
  padding: 20px;
  box-sizing: border-box;
  .side_panel {
    background:#fff;
    padding:20px;
    box-sizing: border-box;
    .side_panel_box {
      text-align:center;
      border: 1px solid #000;
      margin-bottom:20px;
    }
  }
  .main_panel {
    background:#fff;
    padding:20px;
    box-sizing: border-box;
    display:block;
    grid-auto-columns: max-content;

  }
}

这是我正在寻找的粗略模型：

Answer 1

当您使用 jQuery 标记您的帖子时，可以通过 jquery 轻松完成。由于您的 CSS 受到质疑，我将其重新制作为简单的 CSS，而 jQuery 只是将侧窗格高度设置为主要内容高度。希望对您有所帮助！

*** 请注意，要查看其中任何一个是否正常工作，请整页查看。

$(document).ready(function() {
  var maxHeight = $(".main_panel p").height();
  $(".side_panel").height(maxHeight);
})

.box {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 20px;
  grid-auto-columns: max-content;
  background: #efefea;
  margin: 50px auto;
  padding: 20px;
  box-sizing: border-box;
}

.side_panel {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.side_panel_box {
  text-align: center;
  border: 1px solid #000;
  margin-bottom: 20px;
}

.main_panel {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: block;
  grid-auto-columns: max-content;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="side_panel">
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
    <div class="side_panel_box">
      <h1>Title</h1>
      <p>Some text here</p>
    </div>
  </div>

  <div class="main_panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi explicabo autem cupiditate, facere quas recusandae itaque voluptates sint accusantium amet illo veniam totam placeat odio magni, quaerat eligendi. Distinctio et cupiditate nemo fugit,
      praesentium, ea obcaecati dolores non amet autem sequi laboriosam labore vero fugiat dolorem qui voluptatibus omnis eos architecto, recusandae corporis rerum quod. Ea minus et odio voluptate quaerat facere incidunt, impedit repellat eos nihil quis
      modi vel molestiae, eum vitae nam nemo quasi sit aperiam unde ex fugiat. Magnam dolores, enim consectetur veniam illum error eaque ea necessitatibus nam ipsam maxime dolore temporibus animi odio eum molestiae iure. Ut quos cupiditate ad perferendis
      dolorum nemo deserunt exercitationem magni ipsa iste ea fugit expedita sapiente numquam reprehenderit dolore, quo minus excepturi asperiores sit voluptatibus accusamus necessitatibus, ipsam. Delectus iste cupiditate asperiores vero repellendus atque
      aliquid temporibus perspiciatis reiciendis quibusdam similique, nesciunt accusantium tempora voluptatem optio qui odit ullam amet eveniet illum incidunt quis quia repudiandae animi. Recusandae, consequuntur laboriosam praesentium fugit possimus
      nemo ut porro reiciendis quo aperiam et aliquam fuga consectetur fugiat veritatis necessitatibus officiis, officia repellendus, rem. Voluptatem itaque, dolores autem at, culpa cum quam ratione laborum quo totam, nemo sed dolor, hic nisi nobis illo.</p>

  </div>


</div>

在纯 CSS 中做同样的事情，下面是。请注意，这几乎直接来自 here，并应用于此特定用例。

.box {
  display: flex;
}

.flex-item {
  flex: 0 0 50%;
  position: relative;
}

.flex-item-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

.side_panel {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.side_panel_box {
  text-align: center;
  border: 1px solid #000;
  margin-bottom: 20px;
}

.main_panel {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: block;
  grid-auto-columns: max-content;
}

<div class="box">
  <div class="flex-item side_panel">
    <div class="flex-item-inner">
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
      <div class="side_panel_box">
        <h1>Title</h1>
        <p>Some text here</p>
      </div>
    </div>
  </div>

  <div class="flex-item main_panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi explicabo autem cupiditate, facere quas recusandae itaque voluptates sint accusantium amet illo veniam totam placeat odio magni, quaerat eligendi. Distinctio et cupiditate nemo fugit,
      praesentium, ea obcaecati dolores non amet autem sequi laboriosam labore vero fugiat dolorem qui voluptatibus omnis eos architecto, recusandae corporis rerum quod. Ea minus et odio voluptate quaerat facere incidunt, impedit repellat eos nihil quis
      modi vel molestiae, eum vitae nam nemo quasi sit aperiam unde ex fugiat. Magnam dolores, enim consectetur veniam illum error eaque ea necessitatibus nam ipsam maxime dolore temporibus animi odio eum molestiae iure. Ut quos cupiditate ad perferendis
      dolorum nemo deserunt exercitationem magni ipsa iste ea fugit expedita sapiente numquam reprehenderit dolore, quo minus excepturi asperiores sit voluptatibus accusamus necessitatibus, ipsam. Delectus iste cupiditate asperiores vero repellendus atque
      aliquid temporibus perspiciatis reiciendis quibusdam similique, nesciunt accusantium tempora voluptatem optio qui odit ullam amet eveniet illum incidunt quis quia repudiandae animi. Recusandae, consequuntur laboriosam praesentium fugit possimus
      nemo ut porro reiciendis quo aperiam et aliquam fuga consectetur fugiat veritatis necessitatibus officiis, officia repellendus, rem. Voluptatem itaque, dolores autem at, culpa cum quam ratione laborum quo totam, nemo sed dolor, hic nisi nobis illo.</p>

  </div>


</div>