Thanks to a useful tip I found on Stack Overflow, I was able to position the footer at the bottom of all my pages in ASP MVC. I created a custom stylesheet called "mystyles" where I defined classes for .wrapper, .footer, and .push. In the _layout file, within the body and html tags, I set style="height:100%" and used the wrapper, footer, and push classes as shown below. However, I am facing an issue where a scrollbar appears. How can I adjust the footer to display slightly higher so that the scrollbar does not show?
<!DOCTYPE html>
<html style="height:100%">
<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")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/myStyles.css")
</head>
<body style="height:100%">
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
@Html.ActionLink("myapp", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("home", "Index", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container-fluid body-content">
@RenderBody()
</div><!--End of container fluid-->
<div class="push"></div>
</div><!--End of wrapper-->
<div class="footer">
<hr class="my-hr" />
<p>© my footer statement</p>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Content/bootstrap.css")
@RenderSection("scripts", required: false)