1

使用 Express、Jade 和 Twitter Bootstrap - 尝试使用 Sticky Footer 示例。一切都呈现 - 除了页脚不粘。有点违背了目的。有人有运气吗？

布局.js

    !!! 5
html
    head
        title= title
        script(src='/javascripts/jquery-1.9.1.min.js') 
        script(src='/javascripts/bootstrap.min.js') 
        link(rel='stylesheet', href='/stylesheets/bootstrap.css') 
        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='/stylesheets/bootstrap-responsive.css')

    body
        block content

index.js

extends layout



block content

  #wrap
    .container
      .page-header
        h1 #{title}
      p.lead Taco hunger can strike at any moment. With TacoQuest on your BlackBerry® 10 smartphone, you'll always know where the best tacos near you are.
      p Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</p>
    #push
  #footer
    .container
      p.muted.credit Copyright 2013 #{title}

样式.css

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

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

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



/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
}
.container .credit {
  margin: 20px 0;
}
4

1 回答 1

0

尝试添加html到bodyCSS 中，使其高度也为 100%..

html,body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
于 2013-05-30T11:17:58.633 回答