Question

我正在使用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>。

我该怎么做？

Answer 1

＆＃13;

footer{
position:fixed;
  bottom:0;
}

＆＃13;

<!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>

＆＃13;

Answer 2

停留在页面底部的页脚或粘性页脚＆＃39;可以通过一些CSS来实现。您必须将页脚移动到.container body-content之外。

以下是一个示例 - 请查看https://css-tricks.com/snippets/css/sticky-footer/

始终在页面底部显示页脚

2 个答案: