使我的@RenderBody子页面符合浏览器的大小调整

如何解决使我的@RenderBody子页面符合浏览器的大小调整

我已经为一个同事接管了一个项目，我正在设法解决问题。这是我的问题。我试图在调整浏览器大小以使其仍适合所有页面时调整子页面的大小。我在菜单上拥有的代码正在运行，但是在子页面上却没有。我将显示一些屏幕截图并发布一些代码。

这是加载时的样子，并且没有调整Web浏览器的大小。

这是您调整Web浏览器大小时的外观。

缩小Web浏览器窗口时，我试图使“管理角色”与绿色条对齐。

这是我的母版页代码。

<body  onresize="onResize()">
    <div id="masterlayout" class="fixed-top">
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <h1 class="navbar-brand d-flex align-items-center">Div 11</h1>
            <div class="container">
                <ul class="nav navbar-nav">
                    <li></li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Home","Index","Home")</li>
                    @if (1 == 1)
                    {
                        <li class="nav-item nav-link mx-1">@Html.ActionLink("Site Admin","RegisterUsers","SiteAdmin")</li>
                    }
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Promotional","Promotional","Promotional")</li>
                    <li class="nav-item nav-link mx-1">@Html.ActionLink("Reports","Contact","Home")</li>
                </ul>
            </div>
            @Html.Partial("_LoginPartial")
        </nav>
        <div style="background-color: darkgray; width: 100%; height: 10px;">
        </div>

<div id="content1">
        @RenderBody()
    </div>

</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    });
    $(document).ready(function () {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    });

    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("content1").style.marginTop = height - 1 + 'px';
    }
    function onResize() {
        var height = document.getElementById("masterlayout").offsetHeight;
        document.getElementById("menu").style.marginTop = height - 1 + 'px';
    }


</script>

这是我的子表格的代码。

    Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<header>

</header>

<body>

        <div  class="sidenav">
            <div id="menu" class="navbar-text">
                @if (1==1)
                {
                    @(Html.Kendo().Menu()
                .Name("Menu")
                .Direction(MenuDirection.Left)
                .Orientation(MenuOrientation.Vertical)
                .Scrollable(true)
                .Items(items =>
                    {
                       items.Add().Text("Register Employees").Action("RegisterUsers","SiteAdmin").Visible(Request.IsAuthenticated && User.IsInRole("Administrators"));
                       items.Add().Text("Edit Roles").Action("ManageRoles","SiteAdmin");
                    })
    )
                }
            </div>
        </div>

        <div id="idmain" class="main">
            @RenderBody()
        </div>

这是它链接到的最后一页。

@{
    ViewBag.Title = "ManageRoles";
    Layout = "~/Views/Shared/_SiteAdminLayout.cshtml";
}
    
        <h2>ManageRoles</h2>

我的结果应该是，当我缩小Web浏览器屏幕时，所有内容都会随之下降。

解决方法

为了防止渲染中的项目占据不属于其的位置（通常更多是高度问题），每个项目都应具有自己的CSS，包括min-width允许将项目调整为特定大小。

例如，对于您的“登录”问题，假设当链接宽度小于40像素时出现回车，那么解决方法是使用style='min-width:40px;'

这样，该html项的大小是可调的，它的宽度将随着窗口的调整大小而减小，但不会低于40像素，因为这是开始出现问题的地方。