Question

我的棒脚有问题。我从这里使用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

解决方案1（css解决方案）

如果您想要实现this，只需用以下内容替换您的页脚css：

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

解决方案2（javascript解决方案）

如果您想实现this：

加载jQuery并将其添加到javascript：

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

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

.footer {
    position: fixed;
}

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

1 个答案: