我正在为朋友对wordpress主题做很多修改。页脚底部的页脚存在很多问题,而不是继续向上移动并留下空白。
URL: http://design.jarethmusic.com/about/
HTML(footer.php)
<?php global $woo_options; ?>
<?php
$total = 4;
if ( isset( $woo_options['woo_footer_sidebars'] ) ) { $total = $woo_options['woo_footer_sidebars']; }
if ( ( woo_active_sidebar( 'footer-1' ) ||
woo_active_sidebar( 'footer-2' ) ||
woo_active_sidebar( 'footer-3' ) ||
woo_active_sidebar( 'footer-4' ) ) && $total > 0 ) {
?>
<div id="footer-widgets">
<div class="col-full col-<?php echo $total; ?>">
<?php $i = 0; while ( $i < $total ) { $i++; ?>
<?php if ( woo_active_sidebar( 'footer-' . $i ) ) { ?>
<div class="block footer-widget-<?php echo $i; ?>">
<?php woo_sidebar( 'footer-' . $i ); ?>
</div>
<?php } ?>
<?php } ?>
<div class="fix"></div>
</div>
</div><!-- /#footer-widgets -->
<?php } ?>
<div class="push"></div>
<div id="footer">
<div class="col-full">
<div id="copyright" class="col-left">
<?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_left_text'] );
} else { ?>
<p><?php bloginfo(); ?> © <?php echo date( 'Y' ); ?>. <?php _e( 'All Rights Reserved.', 'woothemes' ); ?></p>
<?php } ?>
</div>
<div id="credit" class="col-right">
<?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_right_text'] );
} else { ?>
<p><?php _e( 'Powered by' ); ?> <a href="http://www.wordpress.org">WordPress</a> and <a href="http://www.woothemes.com">WooThemes. </a> <?php _e( 'Designed and edited by' ); ?> <a href="http://johns-webdesign.com/">John Brown.</a></p>
<?php } ?>
</div></div>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
<?php wp_footer(); ?>
<?php woo_foot(); ?>
</body>
</html>
CSS
#footer{padding: 30px 0 20px; background: url(images/bg-ripple-footer.png) repeat top left; color:#999;}
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}
#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer-widgets.png) repeat top left; padding:10px 0; height:60px; }
#footer-widgets .block { padding:20px 10px 0 10px; float:left; }
#footer-widgets .col-1 .block { width:100%; padding-left:0; }
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
#footer-widgets .col-3 .block { width:270px; padding-left: 16px; }
#footer-widgets .col-4 .block { width:200px; padding-left: 10px; }
我希望在你的帮助下我可以深入了解这一点。 约翰
答案 0 :(得分:1)
不在CSS中添加此内容:
#content {
min-height: 700px;
}
您需要内容区域的最小高度才能将页脚“推”到页面底部。如果内容区域是包装器内部的一小部分,则页脚将不在页面底部。
附注:一个非常有用的工具是使用Chrome浏览器。它有一个内置的类似firebug的扩展,可以让你在同时更新网页时检查网页的元素。
答案 1 :(得分:1)
通过遵循这个小教程来管理解决我的问题:
http://mystrd.at/modern-clean-css-sticky-footer/
向mfreitas致信链接。
另外,关心帮助我的其他人。谢谢 约翰
答案 2 :(得分:0)
position: fixed;
使用此CSS更新您的代码:
#footer {position: fixed;}
答案 3 :(得分:0)
在css中使用position: absolute;
作为页脚