Bootstrap sticky footer not staying sticky

StackOverflow https://stackoverflow.com/questions/21696581

Question

I am looking for suggestions for making my footer sticky.

I tried to accomplish this using this page as a example: Example

When content of a page is less then the screen height footbar is ok and sticks bottom but when content is bigger and vertical slider occurs the footer shows on the bottom of the content instead of stay sticky on the bottom of the screen.

Here my _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;
}
Was it helpful?

Solution

add:

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

to #footer. Also try with position:absolute

Optional: you may also want to add text-align:center; to keep the text centered.

That's all you need.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top