从本质上讲,使用Visual Studio 2017创建MVC 4应用程序时,页脚在div中被_layout.cshtml中的类container body-content约束。当然,这会使页脚受限于div中:

c# - 尝试在MVC 4 Web App中使页脚超出容器范围-LMLPHP

但是我们想要的是页脚,就像页眉一样,扩展页面的整个宽度。

当我注释掉div时,

c# - 尝试在MVC 4 Web App中使页脚超出容器范围-LMLPHP

页脚获得宽度的100%,但现在身体中的其他所有内容也都获得:

c# - 尝试在MVC 4 Web App中使页脚超出容器范围-LMLPHP

在页脚下方还有一堆空白的空白区域。这是_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>&copy; @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> div将所有内容包装在</body> container body-content标记内,但这没有任何效果。还有其他建议吗?

最佳答案

如果您使用的是Bootstrap 3,请尝试从具有类容器的div中删除页脚,然后再使用continer-fluid类使另一个div并在其中放入页脚代码。 .container是固定宽度,.container-fluid是全角。请参阅引导程序3 http://getbootstrap.com/css/#grid的网格系统

<div class="container body-content">
    @RenderBody()
</div>
<div class="container-fluid">
    <hr />
    <footer>
          <p>&copy; @DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p>
    </footer>
</div>

10-07 19:01
查看更多