bootstrap粘性页脚与响应内容

当您知道页脚的高度时，粘性页脚有一个简单的解决方案。 http://getbootstrap.com/examples/sticky-footer/bootstrap粘性页脚与响应内容

但当页脚高度可以改变我们如何解决粘页脚

2014-07-01 Tzook Bar Noy

其实，在你给的例子，有没有一个明确的高度上设置页脚。它正在扩展到它的内容。 – joshboley

@joshboley居然有一个高度。它在'.footer'上。现在它被设置为60px。你只需要改变它。 – Aibrean

如果你不知道页脚删除“高度：60像素”的理想高度，从.footer类。页脚高度现在将扩大以适应其内容。

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background-color: #f5f5f5; 
}

您还需要动态设置页边的底部边距，使其不会在绝对定位的页脚下滑动。你可以用javascript来做到这一点。 jQuery的例子：

$(function(){ 
    var footerHeight = $(".footer").height(); 
    $("body").css("margin-bottom", footerHeight); 
    $(".footer").css("margin-top", -footerHeight); 
});

这里举例： http://codepen.io/anon/pen/tFcJr

还有2种方式实现一个棘手的注脚。使用表格：http://codepen.io/anon/pen/AlnHc 使用flexbox：http://codepen.io/anon/pen/qysLg。我不知道这些如何与引导玩耍，但显然Flexbox只支持IE10 +。

来源

2014-07-01 17:30:37 ElwoodP

是的，但是现在如果页面的内容将比屏幕高度更长，所以它会重叠，因为我们没有将边距从身体放到页脚 –

好点子。我已经修改了我的答案。 – ElwoodP

嗯，我寻找一个只有CSS的解决方案，但这仍然有效，所以我会将其标记为其他人 –

如果您检查您所提到的页面的源代码，你会看到有实际评论告诉你什么如何改变页脚高度：

body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 

.footer { 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
}

来源

2014-07-01 17:30:03 Renato

我知道我的意思是当你在页脚中有动态内容，所以你不能在css中指定高度 –

那么你只需要把height：auto; – EdwardM

高度确定....但是边距怎么样... –

这里的自举实例代码：

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
}

你会改变高度属性...

.footer { 
    height: auto; 
}

来源

2014-07-01 21:46:31 EdwardM

页脚的高度不是问题。身体的边缘是问题 –

bootstrap粘性页脚与响应内容

回答

相关问题