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

Posted 2023-03-06

【中文标题】Bootstrap 粘性页脚代码在高度和填充之间发生冲突

【英文标题】：Bootstrap sticky footer code *** between height and padding

【发布时间】：2013-01-07 02:08:45

【问题描述】：

我正在尝试将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 中，我得到了一个具有额外深度的粘性页脚，并且页面有一个垂直滚动条，即使它不需要一个？而这一切都与这个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 */
 

干杯 亚历克斯

【问题讨论】：

将你所有的身体放入一个 div 标签和 pad 中，这将是我尝试的解决方案。

听起来您确切地知道是什么导致了问题；即两个冲突的body标签。为什么不和他们一起玩一下，用你尝试修复它的方式更新你的问题，出了什么问题？

【参考方案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。

【讨论】：

@user2004211：作为这里的新用户，让我提醒您，您应该通过单击左侧投票编号下方的“复选标记”来“接受”这个答案。此外，如果您发现它特别有用，您还应该为答案投票。