Question

我有一个问题是将这个页脚粘贴在我的页面的battom上但是当我调整浏览器大小时它只是拒绝坚持。

JS Bin

<div id="wrap">


  <div class="container">
    <div class="page-header">
      <h1>Sticky footer with fixed  navbar</h1>
    </div>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.  
  </div> <!-- end container -->
<div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
  <div class="container">
    <p class="text-muted credit"> Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
  </div>
</div>

CSS：

      /* Sticky footer styles
  -------------------------------------------------- */

  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 !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -100px;
  }

  /* Set the fixed height of the footer here */
  #push,
  #footer {
    height: 100px;
  }
  #footer {
    background-color: black;
  }

  /* Lastly, apply responsive CSS fixes as necessary */
  @media (max-width: 767px) {
    #footer {
      margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
    }
  }

Answer 1

也许你终于找到了id，但这里是我使用的

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}

Answer 2

将此添加到 CSS ：

#footer {
  position: fixed;
}

Answer 3

/* Negative indent footer by it's height */
    margin: 0 auto -100px;

你能解释一下你想要实现的目标吗？

没有导航栏的bootstrap粘性页脚

3 个答案: