将列限制为另一列的高度

Question

我希望蓝色列具有与白色列完全相同的高度，也就是说，如果蓝色列中的内容超过白色列的高度，则蓝色列将具有滚动。白色列包含动态内容。

这是我目前所拥有的：

​

以下是我想要实现的目标：

​

​

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  /* vertical alignment of the inline element */
}
.card-container.card {
  width: 360px;
  padding: 25px 25px;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.card {
  margin: 0;
}
.release-notes {
  font-size: 12px !important;
  color: #fff;
  background-color: #0082CA;
  overflow: auto;
}
.release-notes > ul {
  padding: 10px;
}

<div class="vertical-center">
  <div class="container">
    <div class="wrapper">
      <div class="card card-container">
        <ul>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
        </ul>
      </div>
      <div class="card card-container release-notes text-left">
        <div class="text-uppercase"></div>
        <ul>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
        </ul>
      </div>
    </div>
  </div>
</div>

​

Answer 1

因此，您需要做的是运行一点jQuery来找到左侧ul的高度，并将右侧ul的高度设置为相同的值。

var new_height = jQuery('.card-container.left ul').height();
jQuery('.card-container.release-notes ul').height(new_height);

然后，您需要设置右侧的ul才能拥有overflow-x:scroll;

请看下面编辑过的小提琴：

https://jsfiddle.net/stv7v2a1/3/

-编辑

请注意，我必须在左侧的ul中添加一个类，以帮助在jQuery和CSS中区分它。

Answer 2

有一个纯css解决方案。您必须创建两个浮动的div，并将它们包装在一个容器中。然后你将不得不使用css hack。

添加一个巨大的负值底部填充，以及相同数量的正值边距。例如：

padding-bottom: -500em;
margin-bottom: 500em;

这将使你的两个浮动div的高度相等。剩下的很简单，只需使用min-height和/或max-height

这是我快速制作的jsfiddle：https://jsfiddle.net/24k3285q/1/

Answer 3

使用jQuery

检查此处https://jsfiddle.net/stv7v2a1/4/

使用的jQuery代码是

$(function(){
  var ht= $('.content').outerHeight();
  $('.release-notes').css({"height":ht});
});

​

为左边的小div //for getting its height指定了一个新的类名content

将overflow-y:scroll;添加到release-notes

ALso将align-items:flex-start添加到wrapper

​