Question

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

在侧面板中，我将始终在内容上有一堆块，这个数字一直在变化。主面板将有一些内容块。通常侧板的高度比主板高。

我正在寻找主面板高度等于该面板中的内容，我正在寻找一种方法让侧面板的高度等于主面板的大小。而侧面板溢出的滚动。我不打算为这两者设置静态高度，因为内容量会发生变化。

目前我正在使用网格，但如果有办法可以改变这一点。

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

function moveToken(player,PosToMove){
    $("#"+PosToMove).prepend($("#player"+player));
    positionTokens(PosToMove);
}

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: