1

我的页脚粘在博客整个页面的底部时遇到了问题。我遇到两个问题。首先，如果我使用position:absolute页脚上升到主博客页面的中间。如果我不理会它，它会粘在底部，但会在博客的整个页面上上升到中间。页脚是我一直遇到的问题。

这是我当前的页脚 CSS 样式

footer {
text-align: left;
background-color: #f4f4f4;
padding-top: 40px;
padding-bottom: 40px;
z-index: 1;
bottom:0;
width:100%;
}

这是页面的链接http://pixelogicblog.tumblr.com/post/41025998534/tes-post

4

5 回答 5

4

查看使用 CSS 的粘性页脚解决方案：

http://ryanfait.com/sticky-footer/

您的页脚仅位于页面中间的原因position: absolute是您没有在 body 和 html 元素上设置最小高度。没有它，正文只占用您为其内容所占用的空间——然后页脚与该底部对齐，而不是与窗口的底部对齐。

尝试将其添加到您的 CSS 中，使其至少占据窗口的高度：

html, body {
    min-height: 100%;
}
于 2013-01-20T18:34:51.737 回答
1

你见过这个吗？

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

跨浏览器（IE6+ 也是）且易于理解。

巧合的是，您当前的页脚没有出现在页面底部，因为它的位置设置为relative，将其位置设置为absolute，它将位于页面底部（只要页面不超过视口） . 相对定位只设置一个元素相对于它正常位置的位置，例如，如果你bottom: -10px在footer元素上设置，那么它看起来会比原本的位置低 10 个像素（希望我在那里有意义！）

如果您绝对定位某些东西，它绝对定位到body标签，或者位置设置为的下一个最近的父级relative（无论如何我都理解）

于 2013-01-20T18:46:49.640 回答
0

将位置设置为绝对

position:absolute;
于 2013-01-21T01:10:59.360 回答
0

如果你想把页脚贴在底部，你可以在,和上使用min-heightviewheight 单位。headermain contentfooter

例子：

<header style="min-height: 10vh">...</header>
<div id="main-content" style="min-height: 85vh">...</div>
<footer style="min-height: 5vh">...</footer>

有了这个，如果您没有将所有视图高度与您的内容一起使用，页脚仍将停留在底部。这是我发现将页脚粘贴在底部的最佳方法。

我希望它会帮助少数人。

于 2022-01-16T05:18:03.080 回答
0

重要的是要注意，除了static（默认）之外的任何定位都会将其排除在文档流之外。我解决这个问题的方法是在正文内容中添加margin-bottom，等于#Footer 的高度。这样做可以确保页脚后面始终有一个空白空间，等于它的高度，防止它与内容重叠。使用absolute, 和fixed会导致内容重叠。

于 2022-01-16T04:32:30.153 回答