1

私は友人のためにワードプレスのテーマに多くの変更を加えています. フッターが上に移動して空白を残すのではなく、ページの下部にとどまることに多くの問題があります。

URL: http://design.jarethmusic.com/about/

HTML (フッター.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(); ?> &copy; <?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;  }

あなたの助けを借りて、この問題を解決できることを願っています。ジョン

4

4 に答える 4

1

この小さなチュートリアルに従うことで、問題を解決できました。

http://mystrd.at/modern-clean-css-sticky-footer/

リンクの mfreitas の功績。

また、これで私を助けてくれた他のすべての人に敬意を表します。ありがとうジョン

于 2012-12-16T22:29:50.907 に答える
1

CSSにこれを追加しないでください：

#content {
min-height: 700px;
}

フッターをページの下部に「押し込む」には、コンテンツ領域の最小の高さが必要です。コンテンツ領域がラッパー内の小さな部分である場合、フッターはページの下部にありません。

補足: 非常に便利なツールは、Chrome ブラウザーを使用することです。組み込みの firebug のような拡張機能があり、Web ページの要素を検査しながら同時に更新できます。

于 2012-12-16T22:07:56.207 に答える
0

使用するposition: fixed;

この CSS でコードを更新します。

#footer {position: fixed;}
于 2012-12-16T22:05:21.650 に答える
0

position: absolute;フッターの CSS で使用する

于 2012-12-16T22:13:20.680 に答える