HTML/CSS/Blazor 修复了需要填充剩余列表上方和下方的按钮 space

Question

我在 blazor 中内置了一个用于购物清单的应用程序。 UI 由默认的 blazor 模板选项卡组成，顶部的添加项目按钮和底部的完成购物按钮。在 2 个按钮之间，我希望剩余的 space 被自定义组件列表占用。

我不知道如何将列表的高度设置为页面上剩余的space。

我最接近的是将列表容器的大小设置为 100vh - 140 像素，其中 140 像素是按钮的大小。

由于导航选项卡在窄屏幕上显示在顶部，而在宽屏幕上显示在左侧，我不能只硬编码它的值。

如果这不依赖于我对它进行硬编码，我也更愿意。

我试过将容器高度设置为 100%，但这只是没有限制。

该列表位于 div 中，带有来自 bootstrap 的自动溢出 class。

密码

   <body style="height:100%">
    <div style="">

        <div style="">
            <button class="btn btn-primary" style="margin-bottom: 10px; width:100%;" @onclick="AddItem">Add Item <span class="oi oi-plus" style="margin-left: 5px;" aria-hidden="true"></span> </button>

        </div>
        <div class="overflow-auto" style="height: calc(100vh - 140px);">
            @foreach (var item in _shoppingItems)
            {
                <ShoppingItemComponent Item="@item" DeleteItem="DeleteItem" BoughtToggle="UpdateItem" ></ShoppingItemComponent>
            }
        </div>
        <div style="">
            <button class="btn btn-primary" style="width:100%;" @onclick="ClearList">Shopping Done</button>
        </div>
    </div>
    </body>

您可以在运行此处看到它，但请注意，我在那里摆弄它，因此它可能与该问题中的样式不完全匹配。 https://smartshoppingapp.azurewebsites.net/

我找到了一些解决堆栈溢出问题的解决方案，但是我无法让它们在我的解决方案中工作，我认为环绕我页面的所有 blazor 样板 divs 和正文等都在阻止100% 高度按预期工作。即 index.html 和 mainlayout.razor

Answer 1

使用bootstrap弹性：

我 un-wired 你的按钮让它在本地工作。

<div class="vh-100 d-flex flex-column align-items-stretch">

    <button class="btn btn-primary">
        Add Item <span class="oi oi-plus" style="margin-left: 5px;" aria-hidden="true"></span>
    </button>

    <div class="flex-fill overflow-auto">
        @foreach (var item in _shoppingItems)
        {
            <ShoppingItemComponent Item="@item" 
                                   DeleteItem="DeleteItem" 
                                   BoughtToggle="UpdateItem" />
        }
    </div>

    <button class="btn btn-primary">
        Shopping Done
    </button>

</div>

附带说明：当我调试这类问题时，我会为 div 分配背景颜色以查看实际情况。然后使用浏览器工具检查 HTML。

HTML/CSS/Blazor 修复了需要填充剩余列表上方和下方的按钮 space

HTML/CSS/Blazor Fixed Buttons above and below list which needs to fill remaining space

html

css

bootstrap-4

blazor