css - Bootstrap 粘性页脚代码在高度和填充之间发生冲突

Question

我正在尝试将 sticky-footer.html 示例添加到我的 Bootstrap 元素中。 但是，正文类中存在代码冲突，影响了我的布局。

在我的带有 bootstrap 响应式固定导航栏的页面代码中使用:

  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

在它使用的粘性页脚示例中:

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

目前我的 css 中包含两个 body 标签。除桌面页面宽度版本外，一切正常，使用下面的当前 css 我得到一个具有额外深度的粘性页脚，并且该页面有一个垂直滚动条，即使它不需要一个？而这一切都与 body 标签冲突和额外的 60px 有关。

  /* 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 -190px;
  }

  /* Set the fixed height of the footer here */
  #push,
  #footer {
    margin-top:20px;
    height: 190px;      
  }
  #footer {       
background-image:url(assets/img/herringboneLight.jpg);   
  }

  /* Lastly, apply responsive CSS fixes as necessary */
  @media (max-width: 767px) {
    #footer {

    }
  }

 body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
 }

干杯 亚历克斯

Answer 1

我不知道您要支持哪些浏览器，但我相信 CSS3 解决方案 ( actually in IE8+) 会更改 body 上的 box-sizing >:

body {
    padding-top: 60px;
    -moz-box-sizing: padding-box; /* or border-box */
    -webkit-box-sizing: padding-box; /* or border-box */
    box-sizing: padding-box; /* or border-box */
}

这应该会导致 height: 100% 在总量中包含 60px。它在 Firefox 中工作，所以，this fiddle有滚动条，this one does not .