两个 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 标记 post 时，可以通过 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 中做同样的事情，下面是。请注意，这几乎直接来自，并应用于此特定用例。

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

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

The height of two divs equal based of height of main div

html

css

sass

css-grid