Html 超过一页内容后，页脚仍保留在屏幕底部的顶部_Html_Css_Wordpress_Web_Footer

Html 超过一页内容后，页脚仍保留在屏幕底部的顶部

html css wordpress web

Html 超过一页内容后，页脚仍保留在屏幕底部的顶部,html,css,wordpress,web,footer,Html,Css,Wordpress,Web,Footer,我一直在建立一个艺术家网站来推广我的音乐，但我的页脚遇到了障碍。我想要的很简单（或者看起来很简单）。我正在尝试创建一个页脚，它位于内容/正文下，位于站点的最底部。左侧、右侧或底部没有空白。然后，当站点内容最少时，页脚将位于屏幕底部。我遇到的问题是，当内容长度超过一页时，页脚不是用它向下推，而是放在屏幕底部（滚动到顶部时）。这意味着当用户滚动到站点的底部时，页脚留在某个中间，重叠内容。p> 我希望我能一直跟踪我访问过并尝试过的所有网站和论坛，但这已经是整整几天的搜索了。这比它开始的时候要好（最初我

我一直在建立一个艺术家网站来推广我的音乐，但我的页脚遇到了障碍。我想要的很简单（或者看起来很简单）。我正在尝试创建一个页脚，它位于内容/正文下，位于站点的最底部。左侧、右侧或底部没有空白。然后，当站点内容最少时，页脚将位于屏幕底部。我遇到的问题是，当内容长度超过一页时，页脚不是用它向下推，而是放在屏幕底部（滚动到顶部时）。这意味着当用户滚动到站点的底部时，页脚留在某个中间，重叠内容。p> 我希望我能一直跟踪我访问过并尝试过的所有网站和论坛，但这已经是整整几天的搜索了。这比它开始的时候要好（最初我无法将左右边距推到全宽），但最后一个问题只是回避了我。任何帮助都将不胜感激。（如果有帮助的话，我使用的是Wordpress二十一儿童主题）

我目前的假设如下：

有一些代码可以使页脚以最少的内容粘在屏幕底部，并且不断应用。据我所知，人们这样做的方式是使用最小高度：100%，但有/没有这条线没有区别

也许在我的html层次结构方面有一些不正确的地方？共有212个使用了柱头、页眉、干管和树脂。我遇到过几个网站，人们说要确保页脚在主包装之外。我已经做过了，但没有成功

也许问题根本不在页脚上？也许其他容器需要更换。可能#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>

还请注意，我已经尝试了Ryan Fait的粘性页脚，我已经看到它被引用了很多次。我没能让它正常工作。我不是一个专业的程序员，我是一个音乐家，对html和css有着基本的了解，我努力节省现金。如果我把页脚完全弄错了，请随时纠正我的错误。非常感谢您的帮助！哦，这是我的网站：www.kjel.ca

试试这个：

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

谢谢你们的帮助。

这个问题似乎离题了，因为它是关于Wordpress主题的，属于Hey Raptor，谢谢你们的提示。我不确定我的问题是否与我的主题有关，或者只是css/编码问题。我已经将它添加到wordpress论坛。我应该在这里删除它吗？如果你在OP中没有注意到，这里还有我网站的链接：对不起，这不起作用。树脂和页脚的作用似乎完全相同。我想这是因为在html中，页脚被定义为footer id=“colophon”而不是div id=“colophon”，所以两者都可以工作。提示：在CSS中，

没有单位，

footer

选择器很好。@KjelSidloski我回答的原因是，您已经为

页脚

指定了属性，如果您注意到代码中有两个页脚标记。这就是为什么它显示了两次图像。@KjelSidloski还有一件事，请确保您已经关闭了所有标记，特别是

@Raptor我已经更改了所有0px；标记为0；但它并没有解决这个问题。

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