1

我正在尝试将sticky-footer.html 示例添加到我的引导项目中。然而，在我的布局中，body 类中存在代码冲突。

在我的带有引导响应的固定导航栏的页面代码中使用：

  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 中，我得到了一个具有额外深度的粘性页脚，并且页面有一个垂直滚动条，即使它不需要一个？这一切都与这个身体标签冲突和额外的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 */
 }

干杯亚历克斯

4

1 回答 1

2

我不知道您要支持哪些浏览器，但我相信一个 CSS3 解决方案（实际上在 IE8+ 中）会改变box-sizingon body：

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 中工作，所以这个小提琴有滚动条，这个没有。

于 2013-01-23T14:53:59.093 回答