Question

我希望我的页脚贴在页面底部，所以当页面小于屏幕时，页脚应该在底部。但它不应该与css文件中的边距冲突。因此，当我使用保证金来处理某些内容时，不应该弄乱页面。

Answer 1

您只需要创建wrapper div并从那里获取页脚。然后在这个包装器中使margin-bottom等于页脚高度并创建一些push div - 它将成为页脚的位置。看看这个：http://jsfiddle.net/PXYSk/4/

Answer 2

尝试使用固定位置和css3 calc()功能：

JSFiddle

Answer 3

只需将页脚设置为position: absolute和bottom: 0。

Answer 4

这是如何创建粘性页脚的一个很好的示例，但是页脚块需要固定的高度：

CSS：

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
.footer, .push {
height: 50px;
}

HTML：

<html>
<head>
    <link rel="stylesheet" href="layout.css" ... />
</head>
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

html5的粘性页脚

4 个答案: