html - Wordpress 全宽页脚不起作用

Question

我想让我的页脚全宽，但通过分配 #footer:100%; 它不会变满。

好吧，当我将 .container 和 .wrapper 设置为 100% 时，它变为全宽，但内容也变为全宽。这里的图像！（使用 .container 和 .wrapper 到 100% ）！

这是footer.php

    <?php wp_footer();?>

    <div class="footer">
    <div class="footer_left">
        <h3>text here</h3>
        <ul>
            <?php dynamic_sidebar('footer-left');?>              
        </ul>
    </div>
    <div class="footer_left">
        <h3>Weitere Informationen:</h3>
        <ul>
            <?php dynamic_sidebar('footer-mid');?>  
        </ul>
    </div>

    <div class="footer_right">
        <h3>text here</h3>
        <ul>
            <li>
                <a href="#"><img src="<?php bloginfo('template_url');?>/images/newsletter.png" alt="newsletter" width="16px" height="16px" />Newsletter</a>
            </li>
            <li>
                <a href="http://www.facebook.com/" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url');?>/images/facebook.png" alt="facebook" width="16px" height="16px" />Facebook</a>
            </li>
            <li>
                <a href="http://www.twitter.com/" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url');?>/images/twitter.png" alt="twitter" width="16px" height="16px" />Twitter</a>
            </li>
            <li>
                <a href="https://plus.google.com/" target="_blank" rel="nofollow"><img src="<?php bloginfo('template_url');?>/images/googleplus.png" alt="googleplus" width="16px" height="16px" />Google +</a>
            </li>
        </ul>

    </div>

</div>

</body>
</html>

这是style.css

* {margin:0px; padding:0px;}
img { border:none; outline: none;}
ul,li {list-style:none;}
body {background: url(images/bg.png) repeat;}
h2 { font-family:Arial; font-size:16px; font-weight: bold; color: #95cd32;}
h4 { font-family:Arial; font-size:16px; font-weight: normal; color:#b400b4;}
h3 {font-family:Arial; color:#b400b4; font-size:16px; margin:15px;}
a { font-family:Arial; text-decoration: none; }


@font-face {
    font-family: 'JellykaCuttyCupcakes';
    src: url('fonts/Jellyka CuttyCupcakes.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HarabaraHand';
    src: url('fonts/HarabaraHand.ttf');
    font-weight: normal;
    font-style: normal;
}


.container {width:902px; height: auto;  margin:0 auto;}
.wrapper {width:902px; height: auto; margin: 0 auto;}
.logo {width:902px; height:140px; top: 12px;}
.logo img {}
.logo h1 {font-size:42px; margin:0; margin-left:20px; padding:0px 0 0 20px; background: url(images/header_logo.jpg) 0% 50% no-repeat; text-indent:-9999px;}
.logo a {text-decoration: none; margin:0; padding:0px; display:inline; }
.logo span {margin-left:20px; font-size:22px; color: #8D8D8D;}

/*****************************************************************************************
**************************** menu ******************************/

#nav { width:100%; height:54px; background-color: #ffffff; }
#nav ul{ list-style-type: none; margin-bottom: 5px; padding-top:10px; z-index:500;}
#nav ul ul {padding:2px;}
#nav ul ul li a {background:#A1D34C; color:#fff;}
#nav ul ul li a:hover {background:#AF00BD; color:#fff;}
#nav ul li{ display: inline; float:left; margin-right:0px; padding:0; position:relative;}

#nav ul li:hover>a { cursor: pointer; color:#A1D34C; }
#nav li li>a:hover { background:#B301B7;}
.menu-main-menu-container ul li+li {border-left:2px solid #b000b1;}

ul.sub-menu{ width:200px;  height:auto; position:absolute; top:35px; display:none; }

.menu-main-menu-container ul li a {text-decoration:none; font-size:18px; color:#b000b1; text-transform:uppercase; text-align:left; font-weight:bold; padding:5px 32px; display:block;}

#nav li ul{ position:absolute; width:200px; display:none; top:100%; left:0;  }
#nav li:hover ul{   display:block;}
#nav li li{ border-left:0;}

.sub-menu li{   float:left;      width:100%;    border-bottom:1px solid #B401B2;}
.sub-menu li:last-child{border:none!important;} 
ul.sub-menu li a:hover{ background:#95cd32!important;   }


.banner{ width:100%; height:330px; margin:20px 0px 15px; background:#fff; overflow:hidden;}
.banner img {width:100%; height:330px;}

#cat { padding:12px 7px 6px; margin-right:10px;  font-size:18px; border:none; background:#fff; -webkit-border-radius: 10px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-bottomleft: 0; border-radius: 10px; border-bottom-left-radius: 0; width:150px; }

/*****************************************************************************
**************************************** Search *******************************************/
#search {height:40px; background-color: #f9f9f9; padding:15px 10px; }
#search input[type=text],input[type=submit] { width:445px; margin-right:10px; padding:10px 15px 7px; font-family:Arial; font-size:14px; color:#000; border:none; background:#fff; -webkit-border-radius: 0px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 0px; -moz-border-radius-bottomleft: 0; border-radius: 0px; border-bottom-left-radius: 0; } 
input[type=submit] {background:#a2d34d; color:#fff; width:auto;  margin-top:0px!important; }


.ssingle {width:610px;margin:0px 5px 20px 0px;height:100%;color:#666;font: 13px Arial;background:#f9f9f9 url(images/title.png) top repeat-x;padding:5px; border:1px solid #dadaaa;}
.ssingle  h2 {margin: 0px 0 0px 0;padding: 10px 0px 10px 10px;text-align: left;font: 24px Arial;font-weight:normal;overflow:hidden; }
.ssingle  h2 a, .ssingle  h2 a:link, .ssingle  h2 a:visited  {color:#B401B2; background-color: transparent;}
.ssingle  h2 a:hover  {color: #228fc4;background-color: transparent;}   
#single_post_head .post-thumb img{ max-width:250px;}
.title{margin: 0 0 0 0px;padding: 0px 0px 0px 0px;}
h2.pagetitle {padding:0px; margin:0 0 15px; font-size:30px;text-align:center;color:#A3D34C;font-family:Arial; text-shadow:1px 3px 10px #CCCCCC;}
h2.pagetitle a {color:#507409;}
.cover {    margin:0 0;padding: 0px 10px ;} 
.entry { margin:0 0;    padding: 0px 0px ;}
.entry a:link, .entry a:visited {   background-color: transparent;}
.entry a:hover {color:#fff;background-color: transparent;text-decoration: none;}
.entry ul, .entry ol{ margin: .4em 0 1em; line-height: 150%;}
.entry ul li, .entry ol li{ list-style-position:outside; margin-left: 1.6em;}
.entry p{font-size:16px; margin:0px 0px 5px;    padding:5px 0px; line-height:22px;}
.singleinfo {font:10px Arial; text-transform:uppercase; color:#B98302; padding:5px 0px;}
.category{ padding:5px 0 5px 5px; }
.category>a:link,.category>a:visited{ color:#F7DB18; }
.category>a:hover{ color:#fff; }

#navigation{ margin:10px 0px 0px 0px; padding:0px 5px 10px 0px; width:700px; }

     /***********************************content************************************/
#content{ width:100%; height:auto; float: left; margin:20px 0 0 0px;}
#content>h3 {margin-left:25px; font-size:16px; font-family: Arial;}
.content_left{ width:625px; height:auto; float:left; font-family:Arial; margin-left:10px; margin-top: 0px;}
#nach_themen {width:600px; height:auto; border:1px solid #ccc; padding:10px 5px; margin-bottom:5px; background:#fff; -webkit-border-radius: 0px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 0; -moz-border-radius-bottomleft: 0; border-radius: 0; border-bottom-left-radius: 0;}
#nach_themen .themen {width:184px; height:auto; border:1px solid #ccc; float:left; margin-left:10px;}
#nach_themen .themen img {width:180px; height:130px; padding:2px;}
#nach_themen .themen h2 {text-transform:uppercase; color:#a3d34c; text-align:center; margin:20px 0 10px;}

.blog_post{width:608px; height:auto; float:left; margin-top: 5px;}
.blog_post img { width:250px; height:auto; float:left; margin: 10px 18px 20px 4px;}
.blog_post.blog_template img{ margin:margin: 10px 10px 20px 10px;}
.blog_post.blog_template .post_content{ margin-right:10px; padding-top:5px;}
.blog_post.blog_template .post_content p{ color:#000;}
.blog_post h2 {margin:4px 0 8px;}
.blog_post ul{ list-style-type:none;}
.blog_post ul li{ width:100%; height:auto; float:left; margin-bottom:30px; border:3px solid #ccc;}

.post_image{width:250px; height:auto; float:left; margin:0 20px 15px 0px;}

.post_content {width:300px; height:auto; float: left;}
.post_content h4 {font-family: Arial; font-size:16px; color:#55247a;}
.post_content h3 {font-weight:normal; font-family:Arial; font-size:14px; color:#000; margin:8px 0 3px; padding:0;}
.post_content p {font-size:16px; font-family:Arial; line-height:22px; margin:10px 0;}
.post_content span:nth-child(4){font-size:14px; font-family:Arial; width:300px; height:auto; float:left; margin:10px 0 4px; }
.post_content span:nth-child(5){font-size:16px; font-weight:bold; font-family:Arial; color:#a3d34c; width:200px; height:auto; float:left; margin:10px 0; }
.post_content .read_more{ display:block; color:#fff; font-family:Arial; font-size:16px;}

.single_post_image{width:250px; font-family:Arial; height:auto; float:left; margin:0 20px 15px 0px;}
.single_post_content{width:335px; font-family:Arial; height:auto; float:right;}


.featured_post {overflow:hidden; float:left; font-family:Arial; /*border:1px solid #ccc;*/ margin-bottom:20px;}
.featured_post h2 {color:#a3d34c; margin:5px 0 15px 0;}
.featured_post img {margin:10px 15px 15px 5px; border:none; float:left;}
.featured_post p {height:auto; float:none; font:18px, font-family:Arial; font-weight:normal; text-align:justify; padding:0 8px 5px;}

.home_post .post_content{ width:auto!important; height:auto; float:none!important; font-family:Arial;   padding: 5px 5px 10px 0;}
.home_post img { width:250px; height:auto; float:left; margin: 4px 30px 0px 0px;}
.home_post.page_single .featured_image{ padding-left:10px; padding-top:10px; height:200px; margin-bottom:10px;}
.home_post.page_single .featured_image img{ width:600px; max-width:600px height:auto; float:left; margin:0; }
.home_post.page_single h2{ color:#B400B4; margin-top:20px; font-family:Arial; margin-left:10px;}
.read_more{ width:34px; height:20px; font-size:28px; margin:0 10px 10px 0; padding:7px 8px 5px; display:block; text-align:center; float:right; background:#a3d34c; color:#fff; -webkit-border-radius: 0px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 0px; -moz-border-radius-bottomleft: 0; border-radius: 0px; border-bottom-left-radius: 0; }


.first_post .post_content{ width:300px; height:auto; float:right; padding: 5px 5px 10px 0;}
.first_post img{ margin:5px 15px 15px 3px!important;}
.first_post  span{ display:none;}
.first_post h2, .read_more{ display:none;}
.first_post .read_more{ display:none !important;}
.first_post h3{ display:none;}
.first_post h4{ display:none;}

.out_post{width:585px; height:auto; float:left; padding:10px 15px; border:1px solid #ccc;}


#single_post_head{ height:auto; float:left; padding-bottom:15px; font-family:Arial, border:1px solid #ccc; padding:10px;}
#single_post_head .home_post{ color:#000;}
.single_post{width:100%; height:auto; float:left; font-family:Arial; padding-bottom:15px; border-top:1px solid #ccc;}
.single>h2 {margin:10px 0 15px 0;}
/*.single p{float:left; font:18px, font-family:Arial; text-align:justify; }*/
.single>span {float:left; font:18px, font-family:Arial; width:275px; height:auto; }
#para {font:16px Arial;}
#cus_single h2 {margin:10px 0 20px;}
#cus_single span {float:left; font:18px, font-family:Arial; width:120px; height:auto; }
#cus_single p {float:left;  width:150px; height:auto; }
#cus_single>p:nth-child(2) {float:left; font:18px; font-family:Arial height:auto; min-height:120px; width:220px;}
#course {padding:13px 0 0 0;}
#course>h2{float:left; margin:10px 0; width:230px; font-size: 20px;}
#course>a {float:left; display:block; padding:8px 15px; background:#B2CF39; color:#fff; font-size: 16px; margin-left:70px; -webkit-border-radius: 0px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 0px; -moz-border-radius-bottomleft: 0; border-radius: 0px; border-bottom-left-radius: 0;}

#customText {width:885px; height:auto; float:left; margin-bottom:15px;}
#customText h3 {margin:0 0 5px; font-size:16px; }
#customText .textwidget {font-family: Arial; font-size:14px; text-align:justify; word-wrap:break-word; line-height: 24px; }

#custom_social {width:870px; height:auto; margin:20px 0 40px;}

#telefon { float: right; line-height: 22px; margin-top: 2px; width: 305px; }

.single_child {width:100%; height:auto; float:left; padding-bottom:15px; border-bottom:1px solid #ccc;}

.nothing  { font-size: 15px; background-color:transparent; border: 0px solid; }

/*************************************************************************************
******************************** sidebar **********************************************/
.sidebar{ width:250px; height:auto; float: right; margin:0px 0 0 12px; background:#fff;}
#sidebar_widgets {width:230px; height:auto; float:left; padding:8px 5px; margin-bottom:5px; background:#a3d34c; color:#fff; font-family:Arial; -webkit-border-radius: 10px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-bottomleft: 0; border-radius: 10px; border-bottom-left-radius: 0;}
#sidebar_widgets li {float:left; margin:10px 10px 10px 35px; list-style-image: url(images/list-style.png); font-size:14px; font-weight:bold;}
.sidebar_widgets {width:230px; height:auto; float:left; padding:8px 5px; margin:10px 0px; color:#000; }
#newsletter { font-size:14px; font-family: Arial; width:213px; padding:10px; height:auto; border:1px solid #ccc;}
#newsletter img {float:left; height:40px; width:40px;}
#newsletter h3{text-transform:uppercase; width:140px; color:#55247a; display:block; float:left; padding:0; margin:10px 0 10px 10px;}
#newsletter h3 span {font-family: Arial; font-size:16px; color:#b400b4;}
#newsletter a:link, a:visited, a:hover {font-family: Arial; color:#55247a;}

#facebook { width:213px; padding:10px; height:20px;}
#facebook h3{text-transform:lowercase; font-size:22px; color:#55247a; display:block; float:left; padding:0; margin:10px 11px;}
#facebook h3 span {color:#b400b4;}
#facebook .fb-overlay {position:relative; left:0!important;}

#google { width:213px; padding:10px 10px 0; height:30px; border:1px solid #ccc;}
#google h3{font-size:22px; margin:0 0 2px 0; padding:0; color:#B400B4; display:block; float:left; }
#google span:nth-child(2) {font-size:35px;}
#google>span:nth-child(4) {font-size:25px; font-family:JellykaCuttyCupcakes,HarabaraHand; margin-right:15px; float:right;}
#google img {vertical-align:middle; margin-left:10px;}

.testimonial_slides {height:300px; width:100%;}

.Home_post{width:608px; float:left;}
.Home_post ul{ list-style:none;}
.Home_post ul li{ width:100%; float:left; margin-bottom:30px; border:1px solid #A5A5A5;}
.Home_post img{ width:250px; height:auto; margin:10px 20px 15px 5px;}
.Home_post .post_content{ width:325px; height:auto; float:right;}



 /******************************************footer****************************************/
.footer{width:960px; height:auto; float:left; font-family:arial; padding:0px 0 30px 0px; background:#6e6e6f;}
.footer_left {height:auto; width:35%; margin:10px 0 0 15px; padding:0; float:left; }
.footer_left h3 {color:#fff; margin-bottom:15px; margin-left:0;}
.footer_left a{ width:100%; height:auto; float:left; font-size:14px; margin-bottom:5px;}
.footer_left a:link, a:hover, a:visited {color:#fff;}
.footer_left .menu {list-style:none; margin-left:3px;}
.footer_left .menu li{font-size:18px; margin:4px 0;}

.footer_right {height:auto; width:25%; margin:10px 0 0 15px; padding:0; float:left;}
.footer_right ul { margin-left:17px; padding:0; }
.footer_right img {vertical-align:middle; margin:0 10px 5px 0; height:23px; width:23px;}
.footer_right h3 {color:#fff; margin-bottom:15px; margin-left:15px;}
.footer_right a{ width:100%; height:auto; float:left; font-size:14px;}
.footer_right a:link, a:hover, a:visited {color:#fff;}
.Social_Widget {margin-left:17px;}

.clear {clear:both;}


/* nsu-form */
.nsu-form input[type=text] { width:220px; padding:13px 10px 7px; font-size:18px; color:#fff; border:none; background:#D1D7C8; -webkit-border-radius: 10px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-bottomleft: 0; border-radius: 10px; border-bottom-left-radius: 0; }
.nsu-form p:nth-child(2) {margin:5px 0 0 80px;}
.nsu-form input[type=submit] {background:#b400b4; color:#fff; width:auto; cursor:pointer;}
.nsu-form label {font-family:arial; font-size:22px; color:#55247A; margin-right:10px;}
.nsu-error {margin-left:10px; color:red;}

.sign_up .nsu-signed-up {font-family:tahoma; font-size:20px;}
.sign_up {width:600px; height:auto; padding:0; margin:0; float:left;}
.sign_up h3 {font-family:Arial; font-size:22px; padding:0; margin:5px 0 15px;}
.sign_up img {width:600px; height:200px; margin:5px;}

}

有任何想法吗？？？为什么只有页脚没有变成全宽？？？

请...

Answer 1

首先，您应该放置wp_footer();在body结束标记之前。从任何共享的包装器或容器中删除您的页脚 div 并将其插入到一个独立的容器中。向这个新包装器添加width:100%规则。

编辑

你看到你需要什么了吗？

编辑 2

您的 DOM 树如下所示：

<html lang="de-DE" xmlns:fb="http://ogp.me/ns/fb#" class="listic_slider_fouc">
    <head></head>
    <body class="home page page-id-146 page-template-default" style="">
    <div class="inner">
        <div class="container">
            <div class="wrapper">
                <header class="logo">...</header>
                <div class="clear"></div>
                <nav>...</nav>      
                <div class="banner">...</div>
                <center>...</center>
                <div id="search3">...</div>
                <div id="content" class="test">...</div><!--content-->

                <div class="footer_background"></div>
                <div class="footer">...</div>
            </div><!--wrapper-->
            <div class="clear"></div>
        </div><!--container-->
    </body>
</html>

但它应该看起来像：

<html lang="de-DE" xmlns:fb="http://ogp.me/ns/fb#" class="listic_slider_fouc">
    <head></head>
    <body class="home page page-id-146 page-template-default" style="">
    <div class="inner">
        <div class="container">
            <div class="wrapper">
                <header class="logo">...</header>
                <div class="clear"></div>
                <nav>...</nav>      
                <div class="banner">...</div>
                <center>...</center>
                <div id="search3">...</div>
                <div id="content" class="test">...</div><!--content-->
            </div><!--wrapper-->
            <div class="clear"></div>
        </div><!--container-->
        <!-- RIGHT PLACE -->
        <div class="footer_background">
            <div class="footer">...</div>
        </div>
        <!-- RIGHT PLACE -->        
    </body>
</html>

有一个 WordPress包含标签，名为get_footer();. 这个函数必须在每个页面模板中调用（除了 header.php 和 footer.php ）。在您的情况下，应该从您的.wrapper和.containerdiv 外部调用它。

请记住将wp_footer();动作从现在位置移动到</body>结束标记之前，以避免脚本块在错误的位置等。

CSS 规则：

.footer_background {
width: 100%;
background-color: #6e6e6f;
}

.footer {
width: 902px;
height: auto;
font-family: arial;
padding: 0px 0 30px 0px;
margin: 0 auto;
}

希望对您有所帮助，如果您遇到困难，请告诉我！

编辑 3

例子：

头文件.php

<html>
  <head>
  <!-- Header TAGS -->
  </head>
<?php wp_head(); ?>
<body>
  <div class="container">
  <div class="wrapper">

索引.php

<?php get_header(); ?>

    <div class="content">
      <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
        <div class="post">
          <h2><?php the_title(); ?></h2>
          <p><?php the_excerpt(); ?></p>
        </div><!-- .post -->
    </div><!-- .content -->
</div><!-- .wrapper -->
</div><!-- .container -->
<?php get_footer(); ?>

页脚.php

<div class="footer_background">
  <div class="footer">
    <!-- Your footer blocks -->
  </div>
</div>

<?php wp_footer(); ?>
</body>
</html>