Question

我在我的项目中使用Bootstrap 3，并排成两排并排。我想要达到的目的是使右侧面板与左侧面板具有相同的高度。

具有相同高度的两列不是问题。正如您在下面提供的代码中看到的那样，它已经完成了。真正的问题是：

左侧面板应符合内容。
如果右侧面板的内容超出了左侧面板的高度，则应显示滚动条。

现在问题来了：我想知道是否有任何纯CSS解决方案可以实现这个目标？请注意，左列的高度可以更改，因此为列指定固定高度不会解决问题。我已经尝试了一些不同的解决方案，但都没有。

这是我目前的代码：

HTML

<div class="row flex-row">
  <div class="col-xs-6">
    <div class="panel panel-default flex-col">
      <div class="panel-body">
        Some<br><br>
        content
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="panel panel-default flex-col">
      <div class="panel-body">
        Some<br><br><br>
        longer<br><br><br>
        content
      </div>
    </div>
  </div>
</div>

CSS

.flex-row, .flex-row > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex: 0 auto;
    -webkit-flex: 0 auto;
    flex: 0 auto;
}

.flex-col {
    display: flex;
    display: -webkit-flex;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -ms-flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;

    overflow-y: auto;
}

小提琴：

https://jsfiddle.net/g1u8u98g/2/

我很感激任何帮助。

Answer 1

将单独的类名称添加到右侧面板，例如“rgt＆＃39;

”

并在CSS中放置：

.rgt{
    height: 90px;
    overflow-y:  scroll;
}

删除您已经完成的样式（如果没有必要）

Answer 2

提供单独的类并将样式设为：

 .lft{
      height:100%;
     }
 .rgt{
      height:100%;
      overflow-y:scroll;
     }

然后将脚本添加为：

<script>
    $('.rgt').css('height', $('.lft').height() + 'px');
</script>

Bootstrap 3 - 我可以使右列与css左侧的高度相同吗？

2 个答案: