为什么我的页脚不在页面底部？答案

【问题标题】：Why is my footer not at the bottom of my page?为什么我的页脚不在页面底部？
【发布时间】：2016-04-19 07:46:00
【问题描述】：

我似乎无法让页脚显示在页面底部。我希望它始终保持在底部，即使它正在响应。

目前，它是垂直居中的。任何人都可以请帮助。谢谢。

_布局页面

@using System.Web.Optimization
@using InventoryManager.Web.StaticHelpers
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="Fleepos" src="...">
                </a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="navbarUsername">@SessionHelper.GetUserFullName()</li>
                    <li>@Html.ActionLink("Sign out", "SignOut", "Shared", null, new { id = "btnButtonSignOut", @class = "btn btn-default navbar-btn" })</li>
                </ul>
            </div>
        </div>
    </nav>
    @RenderBody()

    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="footer">
                    <ul class="footer">
                        <li>
                        Property of Floormind</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

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

CSS

html,body {
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
    height: 100%;
    min-height: 100%;
}

header, footer, nav, section {
    display: block;
}

.footer {
    margin-bottom: -50px;
    height: 50px;
    left: 0;
    position: absolute;
    right: 0;
}

ul.footer {
    margin-top: 10px;
    text-align: center;
    padding-left: 0;
}

    ul.footer li {
        color: #333;
        display: inline-block;
    }


/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

.frmLogin {
    padding-left: 30%;
    padding-right: 30%;
    padding-top: 10%;
}

.navbarUsername {
    margin-top: 14%;
    margin-right: 10px;
    text-align: center;
    font-weight: bold;
}

.txtPageTitle {
    text-align: center;
}

【问题讨论】：

标签： html css asp.net-mvc layout footer

【解决方案1】：

使用position:fixed 并从.footer 类中删除边距，并通过将margin:0 添加到ul.footer 来清除ul 边距

ul.footer {
    text-align: center;
    background: burlywood;
    padding-left: 0;
    margin: 0;
}
.footer {
    height: 50px;
    left: 0;
    position: fixed;
    right: 0;
    bottom: 0;
}

Demo

【讨论】：

【解决方案2】：

将您的页脚从container 中取出，如下所示：

<div id="footer">
   <ul class="footer">
      <li>Property of Floormind</li>
   </ul>
</div>

然后，在你的 CSS 中：

#footer {
  position: fixed; // Places the element sticky somehwere the window
  bottom: 0; // Places at the bottom
  right: 0;
  width: 100%; // In case you need to be full width
}

这是Fiddle

希望对你有帮助。

【讨论】：