Question

我主要使用Bootstrap，但是在这种情况下，纯CSS或Bootstrap都不可行。我有这样的HTML：

#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
    <div class="container">
        <div class="row align-items-center mt-3">
            <div class="col-6 text-center">
                <img width="150" height="150" src="img/user-placeholder.svg">
                <p class="mt-2 mb-0">pholder</p>
            </div>
            <div class="col-6">
                <div class="mb-2">
                    <div class="row">
                        <div class="col-6 text-center">pholder</div>
                        <div class="col-6 text-center">pholder</div>
                    </div>
                    <div class="row">
                        <div class="col-6 text-center">Friends</div>
                        <div class="col-6 text-center">Posts</div>
                    </div>
                </div>
                <butto class="btn btn-transparent mt-2">Click</button>
            </div>
        </div>
        <br>
        <p class="text-center m-0">Contents</p>
        <hr class="mt-0 mb-2">
    </div>
    <div id="filling" class="text-center">
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
    </div>
</div>

现在的问题是：#filling div必须动态填充，我希望它的行为类似于Android编程中的ListView。我必须能够滚动它。因此，我添加了一些CSS：

#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

但是，如果我通过添加像这三个.sample div之类的子代来填充div，则列表会垂直增长，但是#filling div也是如此。换句话说，它迫使我滚动整个页面，而不仅仅是div。

我希望我已经清楚了，这个肯定会被标记为任何flex问题的重复，但是我想收到一个有效的解决方案，因为除了固定div的高度（例如250px）外，我找不到“响应式”方法。

Answer 1

我创建了一个快速的解决方案，将您的max-heigth的{{1}}设置为#filling div 请注意，您需要将所有外部容器的高度设置为100％，这样才能起作用。

JSBin链接：https://jsbin.com/nofobak/edit?html,css,output

50%.

Answer 2

有两件事，| Method | Mean | Error | StdDev | Rank | |------- |---------:|----------:|----------:|-----:| | Your | 4.463 us | 0.0882 us | 0.1936 us | 2 | | Mine | 2.597 us | 0.0235 us | 0.0220 us | 1 |不是Bootstrap类，除非您将其作为自定义类创建；否则，它不是Bootstrap类。 Bootstrap的height实用程序类仅为| Method | Mean | Error | StdDev | Rank | |------- |-----------:|------------:|------------:|-----:| | Your | 6,095.8 us | 119.4976 us | 122.7152 us | 2 | | Mine | 148.1 us | 0.6086 us | 0.5692 us | 1 |。

正如我的评论中所提到的，以及链接的答案，如果您要使用百分比，则需要有一个固定高度的父代，以便该百分比可以作为参考；另一种选择是使用h-40单位设置相对于视口高度的高度。

Bootstrap也为此提供了一些utilities

现在，您当然需要考虑标题内容

h-25, h-50, h-75, h-100, h-auto

vh

无法使div适合弯曲高度

2 个答案: