爲什麼我的頁腳不在我的頁面底部？

我似乎無法讓我的頁腳顯示在頁面的底部。我希望它始終保持在最低點，即使它的響應速度很快。爲什麼我的頁腳不在我的頁面底部？

目前，它是垂直居中。任何人都可以請幫忙。謝謝。

_layout頁

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

來源

2016-01-14 ife labolz

使用position:fixed和.footer類加入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

去除餘量，並清除 ul保證金

來源

2016-01-14 06:10:09 Sowmya

讓您的頁腳出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

希望它能幫助。

來源

2016-01-14 05:12:53 Alex

爲什麼我的頁腳不在我的頁面底部？

回答

相關問題