twitter-bootstrap - 带有滚动内容的 Bootstrap 5 固定高度容器

Question

这是我目前拥有的代码 - 我希望只有在滚动容器视口后才能看到“最后一项”（例如：.scrollable）。现在它调整父级以适应，因此只显示主 html/body 滚动条。这可以使用 flexbox 实用程序吗？帮助！:)

<div class="container-fluid h-100 ">
    <div class="row h-100">
        <div class="col">
            <div class="h-100 d-flex flex-column">
                <div class="row my-3">

                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Input"
                               aria-label="First name">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Input"
                               aria-label="Last name">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Last name"
                               aria-label="Last name">
                    </div>

                </div>
                <div class="row mb-3">
                    <div class="btn-group" role="group" aria-label="Basic outlined example">
                        <button type="button" class="btn btn-outline-primary p-2 bg-white"
                                style="border: 1px solid #ced4da">Overview</button>
                        <button type="button" class="btn btn-outline-primary bg-white"
                                style="border: 1px solid #ced4da">Tickets</button>
                        <button type="button" class="btn btn-outline-primary bg-white"
                                style="border: 1px solid #ced4da">...</button>

                    </div>
                </div>

                <div class="row h-100 mb-3 mx-0 ">

                    <div class="container-fluid h-100">
                        <div class="row h-100">
                            <div class="col-4 h-100 p-0 m-0">
                                <div class="card h-100 border rounded bg-white">
                                    <div class="card-header">
                                        List
                                    </div>
                                    <div class="card-body p-0 m-0">
                                        <div class="list-group h-100 list-group-flush rounded-0">
                                            <div class="h-100 scrollable overflow-auto">
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Last item<br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

标签： twitter-bootstrapbootstrap-5

Answer 1

请记住，h-100是相对于父级的高度，并且父级必须具有定义的高度。因此，vh-100 overflow-hidden在要成为视口高度的元素上使用。强制可滚动容器的父级保持在该高度内。最后overflow-auto在可滚动元素上使用......

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div class="d-flex flex-column vh-100 overflow-hidden">
                <div class="row my-3">
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Input" aria-label="First name">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Input" aria-label="Last name">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Last name" aria-label="Last name">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="btn-group" role="group" aria-label="Basic outlined example">
                        <button type="button" class="btn btn-outline-primary p-2 bg-white" style="border: 1px solid #ced4da">Overview</button>
                        <button type="button" class="btn btn-outline-primary bg-white" style="border: 1px solid #ced4da">Tickets</button>
                        <button type="button" class="btn btn-outline-primary bg-white" style="border: 1px solid #ced4da">...</button>
                    </div>
                </div>
                <div class="row h-100 mb-3 mx-0 overflow-hidden">
                    <div class="container-fluid h-100">
                        <div class="row h-100">
                            <div class="col-4 h-100 p-0 m-0">
                                <div class="card h-100 border rounded bg-white">
                                    <div class="card-header"> List </div>
                                    <div class="card-body p-0 m-0 overflow-hidden">
                                        <div class="list-group h-100 list-group-flush rounded-0">
                                            <div class="h-100 scrollable overflow-auto"> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Last item<br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/p/mpjmGWAkQa