Bootstrap sticky footer not staying sticky

问题

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