Twitter Bootstrap 粘性页脚和 Jade

Posted 2023-03-06

【中文标题】Twitter Bootstrap 粘性页脚和 Jade

【英文标题】：Twitter Bootstrap Sticky Footer and Jade

【发布时间】：2013-05-25 21:44:22

【问题描述】：

使用 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;

【问题讨论】：

在上面添加了 style.css - 谢谢！

您在 index.js 文件中的#push 之前有一个段落结束标记</p>。

【参考方案1】：

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

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