AdminLTE 3.0 - 边栏+页脚问题

Question

背景： 我刚从 razorpages/mvc (.NET 2/3) 开始研究 blazor (.NET 5)。我将 AdminLTE 插件用于菜单目的，并且工作正常。现在，从 Blazor 开始，我也想使用它，但我无法使侧边栏和页脚正常工作。

我的想法是在MainLayout.razor上使用它（稍后我会把它分成组件，但现在我只是在同一个“页面”上使用它）

IMG

MainLayout.razor

@inherits LayoutComponentBase

<div class="page sidebar-mini text-sm" style="height: auto;">
    <div class="wrapper" style="width:100%;">

        <div class="submit-overlay">
            <div class="submit-overlay-text">
                <span class="spinner-grow" role="status" aria-hidden="true"></span>
            </div>
        </div>

        <nav class="main-header navbar navbar-expand navbar-dark">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a href="Index" class="nav-link"><i class="fas fa-home"></i>Home</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown dropdown-hover">
                    <a class="nav-link" data-toggle="dropdown" href="#">
                        <i class="fas fa-th-large"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                        <form>
                            <button class="dropdown-item dropdown-footer">
                                <i class="fas fa-sign-out-alt"></i> Log out
                            </button>
                        </form>
                    </div>
                </li>
            </ul>
        </nav>

        <aside class="main-sidebar sidebar-dark-danger elevation-4" style="margin-top:0px;">
            <a href="MyIP" class="brand-link">
                <img src="images/myCompany.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
                <span class="brand-text font-weight-light">SOME COMPANY</span>
            </a>
            <div class="sidebar">
                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    <div class="image">
                        <img src="images/default-profile.png" class="img-circle elevation-2" alt="User Image">
                    </div>
                    <div class="info">
                        <a href="#" class="d-block">Static User</a>
                    </div>

                    <nav class="mt-2">
                        <ul class="nav nav-pills nav-sidebar flex-column nav-legacy nav-flat" data-widget="treeview" role="menu" data-accordion="false">
                            <!-- Add Menu/Items-->
                        </ul>
                    </nav>
                </div>
            </div>
        </aside>
        <div class="content-wrapper" style="min-height: 855px;">
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-1">
                        <div class="col-sm-6">
                            <h1 class="m-0 text-dark text-bold" style="font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">
                                <i class="fas fa-industry text-olive"></i>
                                Quality<span class="text-success">Management</span>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="container-fluid">
                    @Body
                </div><!-- /.container-fluid -->
            </div>
        </div>
        <footer class="main-footer">
            <div class="float-right d-none d-sm-inline">
                <img src="images/footer-img.png" width="130" />
            </div>
            <strong>Copyright © @DateTime.Now.Year <a href="MyIP">Some Company</a>.</strong> All rights reserved.
        </footer>
        <div id="sidebar-overlay"></div>

    </div>
</div>

_Host.cshtml

@page "/"
@namespace QualityManagement.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QualityManagement</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="QualityManagement.styles.css" rel="stylesheet" />

    <link href="css/adminlte/adminlte.css" rel="stylesheet" />
    <link href="lib/fontawesome/css/all.css" rel="stylesheet" />

</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>

    <script src="_framework/blazor.server.js"></script>

    <script src="js/jquery/jquery-3.6.0.js"></script>
    <script src="js/bootstrap/bootstrap.js"></script>
    <script src="lib/fontawesome/js/all.js"></script>
    <script src="js/popper/popper.min.js"></script>
    <script src="js/adminlte/adminlte.js"></script>

</body>
</html>

Site.css（其中一些目前没有被使用）

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.submit-overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7); /* Black background with opacity */
    z-index: 4000; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.submit-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

.nav-item.nav-link {
    font-weight: bold;
    color: white;
    background-color: #82bdfc;
    margin-left: 2px;
    margin-right: 2px;
}

    .nav-item.nav-link.active {
        font-weight: bold;
        color: #ffffff;
        background-color: #4693e6;
        border-color: #dee2e6 #dee2e6 #ffffff;
        margin-left: 2px;
        margin-right: 2px;
    }

.nav-tab-link {
    background: rgba(44, 59, 75, 0.79);
}

    .nav-tab-link:active {
        background: #2c3b4b;
    }

.form-wizard-item.nav-item.nav-link {
    font-weight: bold;
    color: white;
    background-color: #82bdfc;
    margin-left: 2px;
    margin-right: 2px;
}

    .form-wizard-item.nav-item.nav-link.active {
        font-weight: bold;
        color: #ffffff;
        background-color: #4693e6;
        border-color: #dee2e6 #dee2e6 #ffffff;
        margin-left: 2px;
        margin-right: 2px;
    }

td {
    font-size: 14px;
}

th {
    font-size: 15px;
}


.list-group-item-blue {
    color: #3a74b3;
    background-color: #e4f1ff;
}

    .list-group-item-blue.list-group-item-action:hover, .list-group-item-blue.list-group-item-action:focus {
        color: #3a74b3;
        background-color: #beddff;
    }

.nav-item-blue {
    background-color: #e48e8e;
    color: #ffffff;
    margin-right: 5px;
}

    .nav-item-blue:hover {
        background-color: #cc5454;
        color: #ffffff;
        transition: ease-in-out 0.2s;
    }

    .nav-item-blue.active {
        background-color: #cc5454 !important;
        color: #ffffff !important;
    }

.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

    .list-group.list-group-root .list-group {
        margin-bottom: 0;
    }

    .list-group.list-group-root .list-group-item {
        border-radius: 0;
        border-width: 1px 0 0 0;
    }

    .list-group.list-group-root > .list-group-item:first-child {
        border-top-width: 0;
    }

    .list-group.list-group-root > .list-group > .list-group-item {
        padding-left: 30px;
    }

    .list-group.list-group-root > .list-group > .list-group > .list-group-item {
        padding-left: 45px;
    }

.list-group-item .glyphicon {
    margin-right: 5px;
}

.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

.container {
    display: flex; /* or inline-flex */
    flex-wrap: wrap;
}

.itemContainer {
    flex-grow: 1;
}

Answer 1

我设法解决了（至少现在，我会再测试一下）：

将 style="height:100%;" 添加到 .wrapper，解决了页脚问题。

已将 style="position:fixed;" 添加到 .main-sidebar，解决了边栏问题

AdminLTE 3.0 - 边栏+页脚问题

AdminLTE 3.0 - SideBar+Footer Issue

adminlte

blazor