主页面的页脚出现在页面顶部自动生成的菜单栏的正下方，并且干扰了我主页面的div。其他页面没有发生这种情况，这提示我主页有问题，但我看不出是什么。此外，当我缩小时，内容似乎转向右边，我不知道为什么。
我已经给了足够的底部边距的页脚，我可以看到伸缩容器div没有达到所有的方式到底部。
Index.cshtml
<head>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
}
#myMap {
width: 30vw;
height: 30vh;
}
.flex-container {
margin: auto;
position: fixed;
display: flex;
padding-top: 10px;
width: 80vw;
margin-bottom: -115px;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
width: 49%;
max-width: 49%;
}
.flex-child:first-child {
margin-right: 20px;
width: 49%;
width: auto;
height: auto;
max-width: 49%;
}
</style>
<!--<script src="~/lib/jquery/dist/jquery.min.js"></script>-->
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=LoadMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>
</head>
<div class="flex-container">
<div class="flex-child left">
<h2>Bing Maps integration in ASP.NET</h2>
<h4>Select sector:</h4>
<select id="mapMenu" multiple="multiple" style="width:300px">
<option value="0">Building</option>
<option value="1">Machine</option>
<option value="2">Grid</option>
<option value="3">IT</option>
<option value="4">Power</option>
<option value="5">Platform</option>
</select>
<div id="myMap"></div>
</div>
<div class="flex-child right">
<div id="infoPane"></div>
</div>
</div>
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - ®</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("My Tool", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Data Entry", "DataEntry", "Home")</li>
<li>@Html.ActionLink("View Entries", "ViewEntries", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer style="position:relative; height: 50px; width: 100%;">
<p>© @DateTime.Now.Year - Schneider Electric®</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
我添加了页脚样式标签，但没有帮助。什么好主意吗?
显然，我的预感得到了证实，布局和索引的样式受到了干扰。我发现的解决方案是将布局中的页脚替换为使用RenderSection("Footer", false)的部分，然后通过以下操作分别生成每个页面中的部分:
Index.cshtml:
...
@section Footer
{
<footer>...</footer>
}
有关使用RenderSection()的更多信息和示例: