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

Question

我接手了一个同事的项目，我正在努力解决这个问题。这是我的问题。我试图让我的子页面在浏览器调整大小时调整大小以仍然适合 1 页。我的菜单代码有效，但在子页面上无效。我将展示一些屏幕截图和 post 一些代码。

这是您加载它且未调整网络浏览器大小时的样子。

这是调整网络浏览器大小时的样子。

当 Web 浏览器 window 缩小时，我正在尝试让管理角色与绿色栏对齐。

这是我的母版页代码。

<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>

我的结果应该是当我把网页浏览器的屏幕变小的时候，所有的东西都会跟着变小

Answer 1

为了防止渲染中的项目占据不属于它的位置（通常是高度问题），每个项目都应该有自己的 CSS，包括 min-width 这将允许将项目调整到一定限制。

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

这样，html 项目的大小是可调的，它的宽度会随着 window 的大小调整而减小，但不会低于 40 像素，因为这是它所在的位置开始有问题了。

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

Make my @RenderBody child pages conform to browser resize

html

javascript

css

asp.net-mvc

telerik