在asp net-core mvc中渲染主体的问题答案

【问题标题】：Problem with rendering main body in as-pnet-core mvc在asp net-core mvc中渲染主体的问题
【发布时间】：2020-06-26 10:03:09
【问题描述】：

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

这里是“_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;
}

【问题讨论】：

标签： html css asp.net-core asp.net-mvc-4 razor

【解决方案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>

【讨论】：

谢谢，但这只是把身体放在中间。我希望它跨越所有三行，因此位于页眉和页脚下方。