Question

我似乎无法在页面底部显示我的页脚。我希望它始终保持在最低点，即使它处于响应状态。

目前，它是垂直居中的。谁能请帮忙。感谢。

_Layout page

CSS

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

Answer 1

将您的页脚从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

希望它有所帮助。

Answer 2

使用position:fixed并从.footer课程中移除保证金，并通过将ul添加到margin:0

来清除ul.footer保证金

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 个答案: