引导列表组溢出满容器高度答案

【问题标题】：Bootstrap list-group overflow full container height引导列表组溢出满容器高度
【发布时间】：2021-01-26 01:30:44
【问题描述】：

屏幕截图中的列表组现在可以滚动 - 完美，但我希望它们占据剩余页面高度的 100%。我尝试了 100vh - 由于页面上的其他组件而没有运气。 100% 高度忽略滚动并列出整个页面滚动的所有内容。调整 'vh' 以获得正确的值让我接近了，但重新调整大小让它稍微偏离了一点。

我想我可能需要使用 flexbox 使列表组填充页面的其余部分，但到目前为止我还没有成功。

https://jsfiddle.net/aq9Laaew/128800/

<body>
<style>
    .list-group {
        height: 70vh;
        overflow-y: scroll;
    }
</style>
<main role="main" class="container-fluid">
    <div class="row" style="font-size: 10pt;">
        <div class="col-sm">
            <div class="card">
                <div class="card-header">
                    <strong>Notices</strong>
                </div>
                <ul class="list-group list-group-flush">
                    @foreach($notices as $notice)
                        <li class="list-group-item">
                            {{ $notice['body'] }}<br/>
                            <small class="text-muted float-right">{{ $notice['datetime'] }} by {{ $notice['user_id'] }}</small>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        // ADDITIONAL COL-SM'S
</main>

【问题讨论】：

什么版本的引导程序？你能添加一个工作的 sn-p 或小提琴
Bootstrap 4 - 添加了小提琴
您希望Notices 可以滚动吗？而页面不是？
通知（标题）应该保持原样，但列表组应该滚动。列表组滚动，但我不希望页面滚动。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您是否只需要计算卡片的高度，即 100% 视口高度减去 body 的 padding-top ？？

.card {
    height: calc(100vh - 3.75rem);
}

然后你唯一需要做的就是为list-group设置overflow：

.card .list-group {
    overflow-y: auto;
}

演示： https://jsfiddle.net/davidliang2008/9kfdwjgx/

【讨论】：

“你不只是”。是的——这正是你所做的。但可悲的是，在尝试了每一种过于复杂的方法后，我忽略了基本的 - 只需从高度拿走填充物。卫生部。非常感谢！

【解决方案2】：

尝试将溢出属性添加到正文标记：jsfiddle。

body {
  padding-top: 3.75rem;
  overflow:hidden;
}

.list-group {
  height: 100vh;
  overflow-y: scroll;
  padding-bottom:15px;
}

【讨论】：