超过一页内容时，页脚保持在屏幕底部的顶部滚动位置答案

【问题标题】：With over a page of content the footer remains where the bottom of the screen was at top scroll超过一页内容时，页脚保持在屏幕底部的顶部滚动位置
【发布时间】：2015-02-26 08:46:05
【问题描述】：

我一直在建立一个艺术家网站来宣传我的音乐，但我的页脚遇到了障碍。我想要的非常简单（或者看起来如此）。我正在尝试创建一个位于内容/正文下方并且位于网站最底部的页脚。左侧、右侧或底部没有空白。然后，当网站内容最少时，页脚将位于屏幕底部。我遇到的问题是，当内容超过一页时，而不是将页脚向下推，页脚只是位于屏幕底部的位置（滚动到顶部时）。这意味着当用户滚动到网站底部时，页脚会停留在中间某处，与内容重叠。

我希望我能够跟踪我访问过并尝试过的所有网站和论坛，但是已经搜索了整整几天。比刚开始的时候好多了（原来我不能把左右边距推到全宽），但最后一个问题只是在逃避我。任何帮助将不胜感激。（如果有帮助，我正在使用 Wordpress 21-12 儿童主题）

Undesired Footer

Desired Footer

我目前的假设如下：

有代码使页脚以最少的内容粘在屏幕底部，并且不断应用。据我了解，人们这样做的方式是使用 min-height:100%，但有/没有这条线没有区别。
也许我的 html 层次结构有问题？ 21 人使用了#masthead、#page、#main 和 #colophon。我遇到过几个网站，人们说要确保页脚位于主包装之外。我已经这样做了，但没有成功。
也许问题根本不在页脚中？也许其他容器需要更改。也许#main 需要设置为 position:relative;或其他东西（但没有奏效）。

这是所有的html：

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">

<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>

</header><!-- #masthead -->

<div id="main" class="wrapper">

</div><!-- #page -->
</div><!-- #main .wrapper -->
<footer id="colophon" role="contentinfo">
</footer><!-- #colophon -->
<?php wp_footer(); ?>

</body>
</html>

这是页脚css：

footer {
background:url(http://kjel.ca/wp-content/uploads/2014/12/footer-img.jpeg) repeat-x bottom center;
height:100%;
width:100%;
position:absolute;
margin:0px;
padding:0px;
bottom:0px;
min-width:100%; 
}

另外请注意，我已经尝试过 Ryan Fait 的粘性页脚，我已经看到它被引用了很多。我无法让它正常工作。我不是专业的编码员，我是一名音乐家，具有 html 和 css 的基本知识，试图节省现金。如果我以完全错误的方式处理页脚，请随时纠正我。非常感谢任何帮助！哦，这是我的网站：www.kjel.ca

【问题讨论】：

这个问题似乎跑题了，因为它是关于 Wordpress 主题的，属于 wordpress.stackexchange.com
嘿猛禽，谢谢你的提示。我不确定我的问题是否与我的主题有关，或者是否只是 CSS/编码问题。我已将其添加到 wordpress 论坛。我应该在这里删除它吗？
如果您在 OP 中没有注意到，这也是我网站的链接：kjel.ca

标签： html css wordpress web footer

【解决方案1】：

试试这个：

#colophon {
    background:url(http://kjel.ca/wp-content/uploads/2014/12/footer-img.jpeg) repeat-x bottom center;
    height:100%;
    width:100%;
    position:absolute;
    margin:0px;
    padding:0px;
    bottom:0px;
    min-width:100%; 
}

而不是

footer {
    background:url(http://kjel.ca/wp-content/uploads/2014/12/footer-img.jpeg) repeat-x bottom center;
    height:100%;
    width:100%;
    position:absolute;
    margin:0px;
    padding:0px;
    bottom:0px;
    min-width:100%; 
}

【讨论】：

抱歉没用。 #colophon 和页脚似乎都在做同样的事情。我认为这是因为在 html 中，页脚被定义为页脚 id ="colophon" 而不是 div id="colophon"，所以两者都可以。
提示：在 CSS 中，0 没有单位，footer 选择器很好。
@KjelSidloski 我回答的原因是，您已经为footer 提供了属性，并且如果您注意到代码中有 2 个页脚标记。这就是它显示图像 2 次的原因。
@KjelSidloski 还有一件事，确保你已经关闭了所有的标签，特别是</div>。
@Raptor 我已经改变了所有的 0px;标记为 0；但它并没有解决问题。

【解决方案2】：

好消息，我似乎已经修复了代码。我清理了#colophon 的代码。我从这里改变了它：

#colophon {
    background:url(http://kjel.ca/wp-content/uploads/2014/12/footer-img.jpeg) repeat-x bottom center;
    height:80%;
    width:100%;
    position:absolute;
    margin:0;
    padding:0;
    bottom:0;
    min-width:100%;
    min-height:1%; 
}

到这里：

#colophon {
    background: url("http://kjel.ca/wp-content/uploads/2014/12/footer-img-2.jpeg") repeat-x scroll center bottom transparent;
    height: 100%;
    position: absolute;
    width: 100%;
    background-size: 100% 448px;
}

似乎是问题根源的值是底部：0；这将页脚放在内容下方，但有一个右边距。为了解决这个问题，我添加了这个：

footer[role="contentinfo"] {
    line-height: 2;
    max-width: 100%;
    margin-top: 0;
    padding: 0px 0px;
}

感谢你们的帮助。

【讨论】：