CSS粘性页脚-带页边空白_Css_Sticky Footer

CSS粘性页脚-带页边空白

css

CSS粘性页脚-带页边空白,css,sticky-footer,Css,Sticky Footer,我正在尝试应用粘性页脚的这种方法：它工作得很好，但是，我有一个问题。我的特定站点的设计在页面顶部有一个34像素的边距。所以我尝试了几种实现它的方法，或者通过执行body{margin-top:34px}或者执行container{margin-top:34px} 然而，在这两种情况下，粘性页脚都会弄乱。当我试图补偿34px时，它似乎永远都不起作用有什么想法吗这里有一个提琴示例：使用，它正在工作（在FireFox和IE9上）：标题乱数假文。。。 html{ 位置：相对位置；最小高度

我正在尝试应用粘性页脚的这种方法：

它工作得很好，但是，我有一个问题。我的特定站点的设计在页面顶部有一个34像素的边距。所以我尝试了几种实现它的方法，或者通过执行

body{margin-top:34px}

或者执行

container{margin-top:34px}

然而，在这两种情况下，粘性页脚都会弄乱。当我试图补偿34px时，它似乎永远都不起作用

有什么想法吗

这里有一个提琴示例：

使用，它正在工作（在FireFox和IE9上）：


标题
乱数假文。。。
html{
位置：相对位置；
最小高度：100%；
}
身体{
边距：0 100px；/*底部=页脚高度*/
}
标题
{
背景颜色：绿色；
}
页脚{
位置：绝对位置；
左：0；
底部：0；
高度：100px；
宽度：100%；
背景颜色：蓝色；
}

您可以向我们展示您的网站或您的特定代码问题的示例吗？如果您可以发布一个链接到您的网站或创建一个提琴来演示它，我们将能够提供更好的帮助。好的，这里有一个提琴：哇，这太棒了。我以前从未见过这个。效果非常好！我也没见过它，直到我在谷歌上搜索它，它看起来确实不错。。。我想我可能会更新我自己的网站。。。

<body>
    <header> Header</header>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
header
{
    background-color: green;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: blue;
}