始终在页面底部显示页脚[重复]答案

【问题标题】：Show footer at the bottom of the page always [duplicate]始终在页面底部显示页脚[重复]
【发布时间】：2016-07-19 15:07:34
【问题描述】：

我正在使用 Visual Studio 2015、C# 和 .NET Framework 4.6.1 开发一个 ASP.NET MVC 5 应用程序。

我有这个 _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 product</title>
    @Styles.Render("~/Content/css")
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
    <link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
    @RenderSection("Styles", required: false)
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="header_bg">
        <div class="wrap">
            <div class="header">
                <div class="logo">
                    <img src="~/images/logo.png" alt="" /><br />
                    <span>Versi&oacute;n 2.0</span>
                </div>
                <div class="nav">
                    ¡Hola, @User.Identity.Name!
                </div>
                <div class="clear"> </div>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderSection("Body")
        <hr />
        <footer>
            <p style="font-size:20px">&copy; @DateTime.Now.Year - My Company</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

我的所有页面都没有垂直滚动条，我想始终在页面底部显示<footer>。

我该怎么做？

【问题讨论】：

检查getbootstrap.com/examples/sticky-footer
不清楚你想要什么，但是看看answers here

标签： html css asp.net asp.net-mvc

【解决方案1】：

footer{
position:fixed;
  bottom:0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My product</title>
    @Styles.Render("~/Content/css")
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
    <link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
    @RenderSection("Styles", required: false)
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="header_bg">
        <div class="wrap">
            <div class="header">
                <div class="logo">
                    <img src="~/images/logo.png" alt="" /><br />
                    <span>Versi&oacute;n 2.0</span>
                </div>
                <div class="nav">
                    ¡Hola, @User.Identity.Name!
                </div>
                <div class="clear"> </div>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderSection("Body")
        <hr />
        <footer>
            <p style="font-size:20px">&copy; @DateTime.Now.Year - My Company</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

【讨论】：

【解决方案2】：

可以使用一些 css 来实现留在页面底部的页脚或“粘性页脚”。您必须将页脚移到 .container 正文内容之外。

这是一个例子 - 看看这里https://css-tricks.com/snippets/css/sticky-footer/

【讨论】：