Question

所以我正在使用带有两列的Bootstrap 4。当前两列的高度彼此匹配，但是左列中的内容太多，因此我需要一个滚动div，其高度跨越容器的其余部分。我遇到的问题是它当前位于高度设置为100％（使其与另一列匹配）的div列中。

作为旁注，此类仅在小提琴中设置了max-height，以便它不会拉伸左列，而该列已经与右列的高度匹配了：

.recent-articles-list {
    max-height: 30rem;
}

任何帮助将不胜感激，谢谢！我觉得这可能很简单，但是我的研究并未取得成果。（我尝试过使用绝对定位的解决方案，将高度设置为0 / 1px ...）

JSFiddle：http://jsfiddle.net/3zeh7af4/

（请注意，视口必须在1200px以上才能看到我在说什么。）

添加了所需效果的图像：

Answer 1

从问题描述中我了解到的是，即使右列高度发生变化，您也希望左列与右列完全相同，当然，要使左列滚动显示，您当然需要固定其高度，这样就可以了。

.recent-articles-list { max-height: 30rem; }。

如果是这种情况，下面的代码就是解决这种情况的好方法

.recent-articles {
  background-color: #fff;
  padding: 1rem;
  height: 100%;
  position: relative;
}

.recent-articles-list {
  padding-right: 1rem;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

Answer 2

您似乎想要的是缩小左列的高度，以匹配右列的高度，然后滚动左列中的任何溢出，即：https://www.codeply.com/go/UTOSeASfnt

.recent-articles {
    flex: 1 1 0;
    overflow-y: auto;
}

.recent-articles-list {
    overflow-y: auto;
}

但是，IMO，这种布局效果不佳，因为用户必须滚动整个页面的主体才能看到左列中的所有内容（当右侧的内容比视口高时）。这个问题并不能解释当右边的内容比视口高时您期望发生什么。

更好的解决方案是创建全高布局，然后使两个侧面独立滚动。您可以通过如下所示将左侧固定或发粘来实现此目的...

粘性左列：

.mvh-100 {
    height: 100vh;
}

.recent-articles {
    overflow-y: auto;
    position: sticky;
    top: 1rem;
}

.recent-articles-list {
    overflow-y: auto;
}

<div class="container-fluid body-container">
    <div class="row">
        <div class="col-xl-5 py-3">
            <div class="shadow recent-articles bg-white mvh-100 p-3">
                <h5>Recent Articles</h5>
                <div class="recent-articles-list">
                    ...
                    ...
                </div>
            </div>
        </div>
        <div class="col-xl-7 py-3">
            <div class="row">
                <div class="col-xl-12 shadow">
                    ...
                </div>

                <div class="col-xl-12 shadow">
                    ...
                </div>

                <div class="col-xl-12 shadow">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/cNfS3EOQdV

固定的左侧：

另一种方法是将左侧位置固定：但是固定起来比较复杂，因为它需要使用calc来调整间距。

https://www.codeply.com/go/AqFxOD8gst

相关：Fixed and scrollable column in Bootstrap 4 flexbox

Bootstrap 4-如何在高度固定为100％的另一个div中制作没有固定高度滚动的div

2 个答案: