始终在页面底部显示页脚

4

我正在使用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>。 我该怎么做?

1
请查看 https://getbootstrap.com/examples/sticky-footer/。 - Dandy
1
不清楚你想要什么,但可以看看这里的答案:https://dev59.com/_nVD5IYBdhLWcg3wO5ED - user3559349
2个回答

4

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>


0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接