本质上，当使用 Visual Studio 2017 创建 MVC 4 应用程序时，页脚被限制在类 container body-content 的 div 内。在_layout.cshtml中。当然，这使得页脚被限制在 div 内:
但是我们想要的是页脚能够延伸页面的整个宽度，就像页眉一样。
当我注释掉div时，
页脚获得 100% 的宽度，但现在正文中的其他所有内容也是如此:
页脚下方还有一堆空白区域。这是 _layout.cshtml 的完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/Style.css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="navbar-gradient">
<div class="container">
<div class="navbar-header">
<!--<img src="~/images/lion-logo.png" />-->
<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>
<img src="~/images/lion-logo.png" id="logo"/>
@Html.ActionLink("LION TECHNOLOGIES", "Index", "Home", new { area = "" }, new { @class = "navbar-brand", @id = "logo-text" })
</div>
<div class="navbar-collapse collapse" id="navbar-gradient">
<!--hide links-->
<ul class="nav navbar-nav" id="hidden">
<li>@Html.ActionLink("Reports", "Index", "Home")</li>
<li>@Html.ActionLink("Accounts", "About", "Home")</li>
<li>@Html.ActionLink("Settings", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<!-- <div class="container body-content">-->
@RenderBody()
<!--<hr />-->
<footer>
<p>© @DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p>
</footer>
<!--</div>-->
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
我还尝试将所有内容包装在 <body> 内</body>带有 container body-content 的标签div 但这没有任何效果。还有其他建议吗？
最佳答案
如果您使用的是 bootstrap 3，请尝试从具有类容器的 div 中删除页脚，然后使用类 continer-fluid 创建另一个 div，并将页脚代码放入其中。 .container 是固定宽度，.container-fluid 是全宽。请参见bootstrap 3的网格系统http://getbootstrap.com/css/#grid
<div class="container body-content">
@RenderBody()
</div>
<div class="container-fluid">
<hr />
<footer>
<p>© @DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p>
</footer>
</div>
关于c# - 尝试在 MVC 4 Web 应用程序中将页脚置于容器之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43989734/