在asp.net MVC页面底部推送页脚而不显示小页面的滚动条答案

【问题标题】：push footer at the bottom of pages in asp.net MVC without showing scrollbar for small pages在asp.net MVC页面底部推送页脚而不显示小页面的滚动条
【发布时间】：2017-09-21 18:44:08
【问题描述】：

在this helpful link 的帮助下，我在asp MVC 中将页脚推到我所有页面的底部。我制作了一个名为 mystyles 的样式表并定义了 .wrapper 和 .footer 和 .push 并在 body 和 html 的标记中的 _layout 我定义了 style="height:100%" 并使用 wrapper、footer 和 push 如下所示，但它显示滚动条如何解决页脚显示比滚动条不显示高一点的问题。

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

【问题讨论】：

可能重复：stackoverflow.com/questions/12449156/…

标签： css asp.net-mvc twitter-bootstrap-3

【解决方案1】：

就像@David-Lee 所说，如果没有 CSS 代码，我们将无能为力。不要将身体高度设置为 100%，开玩笑地设置正确的页脚：

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

找到更好的解决方案：https://codepen.io/cbracco/pen/zekgx

【讨论】：

【解决方案2】：

如果没有看到你所有的 CSS，就很难给出一个准确的解决方案。

我的猜测是以下应该指出你正确的方向

.body {
  margin-top: -60px; /* must match positive px of padding-top */
  padding-top: 60px;
}

【讨论】：