I know there are a number of similar posts, but I am unable to apply them to my issue.

I have a table in the last row of a bootstrap grid:

<div >
    <!-- Here are some other rows with dynamically varying sizes -->
    <div >
        <div >
            <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>

The corresponding css looks like this:

.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;
}

The whole thing is within a .page container and a main container (this is blazor default project setup):

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

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

        <div >
            @Body <!-- here the code from above gets inserted -->
        </div>
    </div>
</div>

And lastly I have the following css for the page and 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;
}

What I would want to have is that the background is fixed in place and all content, that gets too big, gets a scrollbar. With the above code, this works fine as long as I'm in full-screen/ full HD mode. As soon as the browser gets resized, the table will 'stick out' of the bottom of the page (the whole page gets an additional scrollbar and one can scroll down below the background image).

The solution must be to use a dynamic height in the table-responsive class, but I'm unable to find the correct way to do it.

CodePudding user response：

A Bootstrap utilites way:

Using a very basic layout to demonstrate:

@inherits LayoutComponentBase

<article >
    @Body
</article>

ScrollDiv.razor

<div >
    @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 >
    <div  style="min-width: 220px;">
            <ScrollDiv>
                <div >
                    @foreach (var user in MessageService!.Users)
                    {
                        <ChatUserView User=@user OnClickCallback=@UserClicked />
                    }
                </div>
            </ScrollDiv>
...

Screen shot: