页脚出现在 div 的顶部 | ASP.NET
Posted
技术标签:
【中文标题】页脚出现在 div 的顶部 | ASP.NET【英文标题】：Footer appears on top of div | ASP .NET 【发布时间】：2021-11-01 04:59:00 【问题描述】：主页的页脚出现在页面顶部自动生成的菜单栏下方，并干扰了我主页中的 div。它不会发生在其他页面中，这提示我主页中有问题，但我看不到那是什么。此外，当我缩小内容时，内容似乎偏向右侧，我不知道为什么。
我为页脚提供了足够的底部边距，我可以看到弹性容器 div 并没有一直到达底部。
索引.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>
我添加了页脚样式标签，但它们没有帮助。有什么想法吗？
【问题讨论】：
您可以使用内置的代码编辑器重现您的问题吗？您提供了 1 个包含内联 css 的 html sn-p 和一个不包含任何样式的不相关的 html sn-p。您的问题不清楚，因为无法观察到问题。 这不是无关的。这是 .NET - Layout.cshtml 在网站的每个页面上呈现。那里的@RenderBody() 函数是指独立渲染每个页面的正文。页脚在布局中，因为它存在于每一页上。 :) 我也不确定是否可以将内置代码编辑器与 .NET 一起使用。 【参考方案1】：显然，我的预感得到了证实，布局和索引的样式受到干扰。
我找到的解决方案是用 RenderSection("Footer", false) 的部分替换 Layout 中的页脚，然后通过执行以下操作分别在每个页面中生成该部分：
Index.cshtml 底部：
...
@section Footer
<footer>...</footer>
更多信息和使用RenderSection()的示例：
Here
【讨论】：
以上是关于页脚出现在 div 的顶部 | ASP.NET的主要内容，如果未能解决你的问题，请参考以下文章