CSS 粘性页脚 - 带边距

标签 css sticky-footer

我正在尝试应用粘性页脚的这种方法:http://code.google.com/p/cleanstickyfooter/

效果很好,但是我遇到了一个问题。我的特定网站的设计在页面顶部有 34 像素的边距。所以我尝试了几种实现它的方法,通过 body {margin-top:34px}container {margin-top:34px}

然而,在这两种情况下,Sticky Footer 都会变得困惑。当我尝试补偿 34px 时,它似乎永远不会成功。

有什么想法吗?

这是一个 fiddle 示例:http://jsfiddle.net/jrZKb/

最佳答案

使用 Modern Clean CSS Sticky Footer ,它正在工作(在 FireFox 和 IE9 上):

http://jsfiddle.net/jrZKb/1/

<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;
}

关于CSS 粘性页脚 - 带边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15893275/

相关文章:

html - 无法让我的页脚粘在底部

html - (CSS) 我的固定页脚与我的内容重叠

html - 使包装器在标题之后获取所有视口(viewport)

javascript - 响应式地将最大宽度 div 内的 div 拉伸(stretch)到视口(viewport)全 Angular ?

css - 下拉菜单在 IE7 中对齐错误

html - 当尺寸缩小到手机时图片消失

html - 如何使用 CSS FlexBox 创建这种复杂的页面布局

html - CSS - 具有恒定宽度内容的全宽粘性页脚

php - HTML 中的粘性页脚,不会出现在页面底部

html - 内部容器不重复-y 用于粘贴页脚