Show footer at the bottom of the page always

Question

I'm developing an ASP.NET MVC 5 app with Visual Studio 2015, C# and .NET Framework 4.6.1.

I have this _Layout.cshtml page:

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

All my pages won't have vertical scrollbar and I want to show <footer> always at the bottom of the page.

How can I do it?

Not clear what you want, but look at the [answers here](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — , Mar 31 '16 at 09:05

score 4 · Accepted Answer · answered Mar 31 '16 at 09:08

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>

score 0 · Answer 2 · answered Mar 31 '16 at 09:05

A footer that stays at the bottom of the page or 'sticky footer' can be achieved with some css. You will have to move the footer outside of the .container body-content.

Here is an example - take a look here https://css-tricks.com/snippets/css/sticky-footer/

Show footer at the bottom of the page always

2 Answers2