引导粘页脚不留粘(Bootstrap sticky footer not staying stick

2019-11-02 22:48发布

我要寻找使我的页脚粘建议。

我试图实现此使用此产品的例子: 实施例

当一个页面的内容是小于屏幕高度footbar是好的和棍棒底部,但在含量较大和垂直滑块发生页脚显示的内容的底部,而不是留粘在屏幕的底部。

在这里,我_layout

HTML

<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    /* Top navbar code */
  </div>

  <div id="wrap">
    <div class="container body-content">
        @RenderBody()
        <hr />
    </div>
  </div>

  <div id="footer">
    <footer>
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
  </div>
</body>

CSS

body {
  /*padding-top: 60px;
  padding-bottom: 20px;*/
}

/* Set padding to keep content from hitting the edges */
.body-content {
  padding-left: 15px;
  padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
  max-width: 280px;
}

/* styles for validation helpers */
.field-validation-error {
  color: #b94a48;
}

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

input.input-validation-error {
  border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
  border: 0 none;
}

.validation-summary-errors {
  color: #b94a48;
}

.validation-summary-valid {
  display: none;
}
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

Answer 1:

加:

position: fixed;
bottom:0;
width:100%;

#footer 。 也有尝试position:absolute

可选:您可能还需要添加text-align:center; 保持居中的文本。

这就是你需要的。



文章来源: Bootstrap sticky footer not staying sticky