我一直在建立一个艺术家网站来推广我的音乐，但我的页脚遇到了障碍。我想要的很简单（或者看起来很简单）。我正在尝试创建一个位于内容/正文下方、位于网站最底部的页脚。左侧、右侧或底部没有空格。然后，当网站内容最少时，页脚将位于屏幕底部。我遇到的问题是，当内容长度超过一页时，页脚不是用它向下推，而是放在屏幕底部（滚动到顶部时）。这意味着，当用户滚动到网站底部时，页脚仍保留在中间的某个位置，与内容重叠。
我希望我能一直跟踪我访问过并尝试过的所有网站和论坛，但这已经是整整几天的搜索了。这比它开始的时候要好（最初我无法将左右边距推到全宽），但最后一个问题只是在回避我。任何帮助都将不胜感激。（如果有帮助的话，我正在使用Wordpress的“二十一个孩子”主题）
Undesired Footer
Desired Footer
我目前的假设如下：
有一些代码可以使页脚以最少的内容粘在屏幕底部，并且不断应用。据我所知，人们这样做的方式是使用最小高度：100%，但有/没有这条线没有任何区别。
也许在我的html层次结构方面有什么不对的地方？使用了#刊头、#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%;
}
以下是网站本身：www.kjel。ca（stackexchange不允许我发布超过两个链接）
还请注意，我尝试了Ryan Fait的sticky footer，我经常看到它被引用。我没能让它正常工作。我不是一个专业的程序员，我是一个音乐家，有html和css的基本知识，努力节省现金。如果我把页脚完全弄错了，请随时纠正我的错误。非常感谢您的帮助！
SO网友:Kjel Sidloski
好消息，我似乎已经修复了代码。我清除了#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;
}
谢谢你们的帮助。
