Fatal编程技术网
  • html/
  • Html 为什么我的页脚不在页面底部？

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

html css asp.net-mvc layout

Html 为什么我的页脚不在页面底部？,html,css,asp.net-mvc,layout,footer,Html,Css,Asp.net Mvc,Layout,Footer,我似乎无法让页脚显示在页面底部。我希望它在任何时候都保持在底部，即使它是有反应的 目前，它是垂直居中的。谁能帮忙吗。谢谢 \u布局页面 @using System.Web.Optimization @using InventoryManager.Web.StaticHelpers <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewpor

我似乎无法让页脚显示在页面底部。我希望它在任何时候都保持在底部，即使它是有反应的

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

\u布局页面

@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>
将页脚从
容器中取出，如下所示：


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


这是我的建议


希望有帮助。
使用
position:fixed
并从
.footer
类中删除边距，然后通过将
边距：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;
}





#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
}



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