html - 实现继承其父宽度的粘性页脚的正确方法是什么？

Question

我对 stick footer 有疑问。我从这里使用 bootstrap 3 的粘性页脚方法:Sticky Footer - BootStrap .它的宽度是 100%，并且不从父级继承相同的宽度(html 或 body 的宽度)。我的网站已经有一个 margin: 10px，它会影响页面上的所有其他内容，包括页脚。常识会告诉我像这样设置页脚:margin-left: 0 !important，但这不起作用。另外，我可以只使用 overflow-x: hidden; 来消除滚动条，但这只是懒惰而不是正确的做法。我只想继承页脚的宽度(换句话说，剪掉跨度超过其父级的页脚宽度)并保持与父级完全相同的宽度。

这是我的问题的一个可视化示例:http://jsfiddle.net/ubc92/

粘性页脚 CSS:

html {
      position: relative;
      min-height: 100%;
}
body {
      /* Margin bottom by footer height */
      margin-bottom: 60px;
}
footer {
      position: absolute;
      bottom: 0;
      width:100%; /*this adds a horizontal scrollbar more than the body and html's width.*/
      margin-left:0 !important; /*Tried to override and eliminate the scrollbar by setting the footer without any margin properties, but wasn't effective*/
      /* Set the fixed height of the footer here */
      height: 60px;
      background-color: transparent;
      color:white;
}
*{
    border: 1px dotted blue;
}

Answer 1

方案一(css方案)

如果要实现this ，只需将您的页脚 css 替换为:

footer {
    position: fixed;
    bottom: 0;
    right: 10px;
    left: 10px;
    height: 60px;
    background-color: transparent;
    color:black;
    border: 1px dotted red;
}

---

方案二(javascript方案)

如果要实现this只是:

加载 jQuery 并将其添加到 javascript 中:

$('footer').width($('.jumbotron').width())

并将页脚位置从绝对位置更改为固定位置:

.footer {
    position: fixed;
}