0

By help of this helpful link I push footer at the bottom of all of my pages in asp MVC. I made a stylesheet named mystyles and define .wrapper and .footer and .push and in the _layout in tag of body and html I define style="height:100%" and use wrapper, footer and push like in the following but it display scrollbar how can I solve it that footer display a little higher that 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>&copy; my footer statement</p>

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

Community
  • 1
  • 1
bz.morvarid
  • 177
  • 1
  • 5
  • 17
  • Possible duplicate of : http://stackoverflow.com/questions/12449156/stick-footer-to-bottom-of-page-without-unnecessary-scroll-bars – Sajal Mar 14 '17 at 07:36

2 Answers2

2

Like @David-Lee said without css code we can't do much. Don't put body Height on 100%, jest set properly footer:

<div style="bottom:0;position: fixed; width:100%;">
  <hr style="width:100%;" />
    <footer>
      <p>&copy; @DateTime.Now.Year</p>
    </footer>
</div>

find a better solution : https://codepen.io/cbracco/pen/zekgx

RB-10111
  • 21
  • 4
0

Without seeing all of your CSS it would be hard to give an exact solution.

My guess is the following should point you in the right direction

.body {
  margin-top: -60px; /* must match positive px of padding-top */
  padding-top: 60px;
}
David Lee
  • 2,040
  • 17
  • 36