在 as-pnet-core mvc 中渲染主体的问题

Question

我在排列页眉和页脚部分视图时遇到问题。我希望这些与主体视图重叠，但是，它们都像第一张图片一样渲染，但它应该像第二张一样：

这是“_Layout.cshtml”代码：

    <body>
        <div name="main_area" class="main_area">
            <div name="header_meny" class="header_meny">
                @await Html.PartialAsync("_Header")
            </div>
            <div name="views_area" class="views_area">
                @RenderBody()
            </div>
            <div name="footer_meny" class="footer_meny">
                @await Html.PartialAsync("_Footer")
            </div>
        </div>
    </body>

和.css 文件：

.main_area {
    display: grid;
    grid-template-rows: 68px 978px 34px;
}

.header_meny {
    grid-row: 1/2;
    background: green;
}

.views_area {
    grid-row: 1/4;
    background: blue;
}

.footer_meny {
    grid-row: 3/4;
    background: yellow;
}

Answer 1

更改网格行

.main_area {
    display: grid;
    grid-template-rows: 68px 978px 34px;
}

.header_meny {
    grid-row: 1;
    background: green;
}

.views_area {
    grid-row: 2;
    background: blue;
}

.footer_meny {
    grid-row: 3;
    background: yellow;
}

更新重叠网格

.main_area {
    display: grid;
    grid-template-rows: 68px 978px 34px;
}

.header_meny {
    grid-row: 1;
    grid-column: 1;
    background: green;
}

.views_area {
    grid-row: 1 / 3;
    grid-column: 1;
    background: blue;
}

.footer_meny {
    grid-row: 3;
    grid-column: 1;
    background: yellow;
}

现在网格是根据它们加载的顺序堆叠的。这意味着您还必须编辑 HTML

<body>
<div name="main_area" class="main_area">
    <div name="views_area" class="views_area">
        @RenderBody()
    </div>

    <div name="header_meny" class="header_meny">
        @await Html.PartialAsync("_Header")
    </div>
    
    <div name="footer_meny" class="footer_meny">
        @await Html.PartialAsync("_Footer")
    </div>
    
</div>
</body>

在 as-pnet-core mvc 中渲染主体的问题

Problem with rendering main body in as-pnet-core mvc

html

css

razor

asp.net-mvc-4

asp.net-core