100%宽页脚-自定义子主题

时间:2012-03-27 作者:Varazi

我正在为Wordpress制作一个自定义的子主题,我似乎无法获得100%的页脚宽度来表示。

实时示例页面:http://glustik.com/wordpress/

我尝试了多种方法,但我无法显示页脚背景,页脚的内容显示得很好。

Here is the Footer Code I am Using.(我正在尝试复制标头)

#footer{
    width: 100%;
    margin:20px 0 20px 0;
    height:280px;
    border: 1px solid;
    border-top-color:rgba(255, 255, 255, 0.14); 
    border-bottom-color:rgba(0, 0, 0, 0.14);
    border-left-color:rgba(0, 0, 0, 0.14);
    border-right-color:rgba(0, 0, 0, 0.14);
    display:block;
    -moz-box-shadow: 0 0 15px 10px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 15px 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 15px 10px rgba(0,0,0,0.4);
    background: #262626; /* Old browsers */
    background: -moz-linear-gradient(top,  #262626 0%, #131313 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#262626), color-stop(100%,#131313)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #262626 0%,#131313 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #262626 0%,#131313 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #262626 0%,#131313 100%); /* IE10+ */
    background: linear-gradient(top,  #262626 0%,#131313 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#262626\', endColorstr=\'#131313\',GradientType=0 ); /* IE6-9 */
}
Here is the HTML for my FOOTER.php :

    <div id="map">
        <iframe width="425" height="150" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;safe=off&amp;q=3945+S+Durango+Dr+Ste+A6+Las+Vegas,+NV+89147&amp;ie=UTF8&amp;hq=&amp;hnear=3945+S+Durango+Dr,+Las+Vegas,+Nevada+89147&amp;gl=us&amp;t=m&amp;z=14&amp;ll=36.117592,-115.27902&amp;output=embed"></iframe>
    </div><!-- #map -->

   <div id="footerInfo">
        <p>
            <span class="bold">Address:</span><br />
            3945 S Durango Dr<br />
            Las Vegas, NV 89147<br /><br />

            <span class="bold">Phone:</span><br />
            702-349-0320<br /><br />

            <span class="bold">Hours:</span><br />
            11am - 3am
        </p>
    </div><!-- #footerInfo -->

    <div id="socialMedia">
        <p>
            Facebook, Twitter, Yelp, and Kyara go Here.
        </p>
    </div><!-- #socialMedia -->

    <div class="clearfix"></div>

    <div id="copyright">
        <p>Website Design by <a href="http://glustik.com">gluSTIK Multimedia</a></p>
    </div><!-- #copyright -->
</div><!-- .wrapper -->

1 个回复
最合适的回答,由SO网友:Adam Rice 整理而成

查看您的代码,我没有发现任何明显的错误,但使用Safari的检查器,很明显footer DIV没有调用#footer CSS规则。不清楚原因。

如果页眉div和页脚div具有相同的样式,则可以通过使用一组样式来简化代码:#页眉、#页脚{…}。更少出错。

结束