Question

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

layout.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}

的style.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;
}

Answer 1

尝试将html添加到body CSS，使其高度也为100％。

html,body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

Twitter Bootstrap粘性页脚和玉

1 个答案: