如何让一个bootstrap容器使用剩下的视口space？

Question

我知道有很多类似的帖子，但我无法将它们应用到我的问题中。

我在 bootstrap 网格的最后一行有一个 table：

<div class="container-fluid">
    <!-- Here are some other rows with dynamically varying sizes -->
    <div class="row">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Size (byte)</th>
                        <th>Loaded</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var file in _filesToUpload)
                    {
                        <tr>
                            <td>@file.Name</td>
                            <td>@file.FileType</td>
                            <td>@file.FileSize</td>
                            <td>@file.Loaded.ToString()</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

对应的css是这样的：

.table {
    color: white;
    background-color: rgba(0, 0.941, 0, 0.5);
}

.table-responsive {
    height: 40rem;
    overflow: auto;
}

thead tr:nth-child(1) th {
    background-color: black;
    position: sticky;
    top: 0;
    z-index: 10;
}

整个事情都在一个 .page 容器和一个 main 容器中（这是 blazor 默认项目设置）：

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4 auth">
            <LoginDisplay />
        </div>

        <div class="content px-4">
            @Body <!-- here the code from above gets inserted -->
        </div>
    </div>
</div>

最后我有以下 css 用于 page 和 main class。

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    background-color: transparent;
}


.main {
    flex: 1;
    background-image: url(../web/wallpaper.jpg);
    background-repeat: no-repeat;
    background-position: top 0 right 0;
    background-size: cover;
    background-attachment: fixed;
}

我想要的是背景固定在适当的位置，所有内容都太大了，有一个滚动条。使用上面的代码，只要我处于全屏/全高清模式，它就可以正常工作。一旦浏览器调整大小，页面底部的 table 将 'stick out'（整个页面有一个额外的滚动条，可以向下滚动到背景图像下方）。

解决方案必须是在 table-responsive class 中使用动态高度，但我无法找到正确的方法。

Answer 1

一个Bootstrap实用程序方式：

使用非常基本的布局来演示：

@inherits LayoutComponentBase

<article class="flex-fill d-flex flex-column">
    @Body
</article>

ScrollDiv.razor

<div class="d-flex flex-column flex-fill overflow-auto @CssClasses">
    @ChildContent
</div>

ScrollDiv.razor.cs

public partial class ScrollDiv : ComponentBase
{
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? CssClasses { get; set; }
}

SomePage.razor

...
<div class="d-flex flex-row align-items-stretch mh-100 vh-100 overflow-hidden">
    <div class="d-flex flex-column border-end " style="min-width: 220px;">
            <ScrollDiv>
                <div class="d-flex flex-column">
                    @foreach (var user in MessageService!.Users)
                    {
                        <ChatUserView User=@user OnClickCallback=@UserClicked />
                    }
                </div>
            </ScrollDiv>
...

屏幕截图：

如何让一个bootstrap容器使用剩下的视口space？

How to let a bootstrap container use the remaining viewport space?

html

css

bootstrap-4

blazor