Wordpress 全宽页脚 [英] Wordpress Full Width Footer

问题描述

我想让我的页脚全宽，但通过分配#footer:100% 使其不会变满；

好吧，当我将 .container 和 .wrapper 设置为 100% 时，它会变成全宽，但内容也会变成全宽.这里的形象！(使用 .container 和 .wrapper 到 100% )！

图片链接:http://i44.tinypic.com/33ysups.jpg>

这里是footer.php

 <div class="footer"><div class="footer_left"><h3>这里的文字</h3><ul><?php dynamic_sidebar('footer-left');?>

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

<div class="footer_right"><h3>这里的文字</h3><ul><li><a href="#"><img src="<?php bloginfo('template_url');?>/images/newsletter.png" alt="newsletter" width="16px" height="16px"/>时事通讯</a><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><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><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>

</html>

这里是 style.css

* {margin:0px;填充:0px;}img { 边框:无；大纲:无；}ul,li {list-style:none;}正文{背景:网址(图像/bg.png)重复；}h2 { 字体系列:Arial;字体大小:16px；字体粗细:粗体；颜色:#95cd32；}h4 { 字体系列:Arial;字体大小:16px；字体粗细:正常；颜色:#b400b4;}h3 {font-family:Arial;颜色:#b400b4；字体大小:16px；边距:15px;}一个 { 字体系列:Arial;文字装饰:无；}@字体脸{字体系列:'JellykaCuttyCupcakes';src: url('fonts/Jellyka CuttyCupcakes.ttf');字体粗细:正常；字体样式:正常；}@字体脸{字体系列:'HarabaraHand';src: url('fonts/HarabaraHand.ttf');字体粗细:正常；字体样式:正常；}.container {width:902px;高度:自动；边距:0 自动；}.wrapper {宽度:902px;高度:自动；边距:0 自动；}.logo {宽度:902px;高度:140px；顶部:12px;}.logo img {}.logo h1 {字体大小:42px;保证金:0;左边距:20px；填充:0px 0 0 20px;背景: url(images/header_logo.jpg) 0% 50% 不重复；文本缩进:-9999px;}.logo 一个 {文字装饰:无；保证金:0;填充:0px;显示:内联；}.logo 跨度 {margin-left:20px;字体大小:22px；颜色:#8D8D8D;}/***************************************************************************************************************************** 菜单 ******************************/#nav { 宽度:100%;高度:54px；背景色:#ffffff；}#nav ul{ 列表样式类型:无；底边距:5px；填充顶部:10px;z-index:500;}#nav ul ul {padding:2px;}#nav ul ul li a {背景:#A1D34C;颜色:#fff;}#nav ul ul li a:hover {background:#AF00BD;颜色:#fff;}#nav ul li{ 显示:内联；向左飘浮;边距右:0px;填充:0;位置:相对；}#nav ul li:hover>a { 光标:指针；颜色:#A1D34C；}#nav li li>a:hover { background:#B301B7;}.menu-main-menu-container ul li+li {border-left:2px solid #b000b1;}ul.sub-menu{ 宽度:200px;高度:自动；位置:绝对；顶部:35px；显示:无；}.menu-main-menu-container ul li a {text-decoration:none;字体大小:18px；颜色:#b000b1；文本转换:大写；文本对齐:左；字体粗细:粗体；填充:5px 32px;显示:块；}#nav li ul{ 位置:绝对；宽度:200px；显示:无；顶部:100%；左:0;}#nav li:hover ul{ display:block;}#nav li li{ border-left:0;}.sub-menu li{ float:left;宽度:100%；边框底部:1px 实心 #B401B2;}.sub-menu li:last-child{border:none!important;}ul.sub-menu li a:hover{ background:#95cd32!important;}.banner{ 宽度:100%;高度:330px；边距:20px 0px 15px;背景:#fff;溢出:隐藏；}.banner img {width:100%;高度:330px;}#cat { 填充:12px 7px 6px;边距右:10px;字体大小:18px；边界:无；背景:#fff;-webkit-border-radius: 10px;-webkit-border-bottom-left-radius: 0;-moz-border-radius: 10px;-moz-border-radius-bottomleft: 0;边框半径:10px；边框左下角半径:0；宽度:150px；}/***************************************************************************************************************************** 搜索 ***********************************************/#search {高度:40px;背景色:#f9f9f9；填充:15px 10px;}#search input[type=text],input[type=submit] { width:445px;边距右:10px;填充:10px 15px 7px;字体系列:Arial;字体大小:14px；颜色:#000；边界:无；背景:#fff;-webkit-border-radius: 0px;-webkit-border-bottom-left-radius: 0;-moz-border-radius: 0px;-moz-border-radius-bottomleft: 0;边界半径:0px；边框左下角半径:0；}输入[类型=提交] {背景:#a2d34d;颜色:#fff;宽度:自动；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;边框:1px 实心 #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;背景颜色:透明；}.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;边距:0 0 15px；font-size:30px;text-align:center;color:#A3D34C;font-family:Arial;文本阴影:1px 3px 10px #CCCCCC;}h2.pagetitle a {颜色:#507409;}.cover { margin:0 0;padding: 0px 10px;}.entry { 保证金:0 0;填充:0px 0px;}.entry a:link, .entry a:visited { 背景色:透明；}.entry a:hover {color:#fff;background-color: transparent;text-decoration: none;}.entry ul, .entry ol{ 边距:.4em 0 1em;行高:150%;}.entry ul li, .entry ol li{ list-style-position:outside;左边距:1.6em;}.entry p{font-size:16px;边距:0px 0px 5px;填充:5px 0px;行高:22px;}.singleinfo {字体:10px Arial;文本转换:大写；颜色:#B98302；填充:5px 0px;}.category{ 填充:5px 0 5px 5px;}.category>a:link,.category>a:visited{ color:#F7DB18;}.category>a:hover{ 颜色:#fff;}#navigation{ 边距:10px 0px 0px 0px;填充:0px 5px 10px 0px;宽度:700px；}/***********************************内容*************************************/#content{ 宽度:100%;高度:自动；向左飘浮;边距:20px 0 0 0px;}#content>h3 {margin-left:25px;字体大小:16px；字体系列:Arial;}.content_left{ 宽度:625px;高度:自动；向左飘浮;字体系列:Arial;左边距:10px；边距顶部:0px;}#nach_themen {宽度:600px;高度:自动；边框:1px 实心 #ccc;填充:10px 5px;底边距:5px；背景:#fff;-webkit-border-radius: 0px;-webkit-border-bottom-left-radius: 0;-moz-border-radius: 0;-moz-border-radius-bottomleft: 0;边界半径:0；边框左下角半径:0;}#nach_themen .themen {width:184px;高度:自动；边框:1px 实心 #ccc;向左飘浮;左边距:10px;}#nach_themen .themen img {width:180px;高度:130px；填充:2px;}#nach_themen .themen h2 {text-transform:uppercase;颜色:#a3d34c；文本对齐:居中；边距:20px 0 10px;}.blog_post{width:608px;高度:自动；向左飘浮;边距顶部:5px;}.blog_post img { width:250px;高度:自动；向左飘浮;边距:10px 18px 20px 4px;}.blog_post.blog_template img{ margin:margin: 10px 10px 20px 10px;}.blog_post.blog_template .post_content{ margin-right:10px;填充顶部:5px;}.blog_post.blog_template .post_content p{ color:#000;}.blog_post h2 {边距:4px 0 8px;}.blog_post ul{ list-style-type:none;}.blog_post ul li{ 宽度:100%;高度:自动；向左飘浮;底边距:30px；边框:3px 实心 #ccc;}.post_image{width:250px;高度:自动；向左飘浮;边距:0 20px 15px 0px;}.post_content {宽度:300px;高度:自动；向左飘浮;}.post_content h4 {font-family: Arial;字体大小:16px；颜色:#55247a;}.post_content h3 {字体粗细:正常；字体系列:Arial;字体大小:14px；颜色:#000；边距:8px 0 3px;填充:0;}.post_content p {字体大小:16px;字体系列:Arial;行高:22px；边距:10px 0;}.post_content span:nth-child(4){font-size:14px;字体系列:Arial;宽度:300px；高度:自动；向左飘浮;边距:10px 0 4px;}.post_content span:nth-child(5){font-size:16px;字体粗细:粗体；字体系列:Arial;颜色:#a3d34c；宽度:200px；高度:自动；向左飘浮;边距:10px 0;}.post_content .read_more{ 显示:块；颜色:#fff;字体系列:Arial;字体大小:16px;}.single_post_image{width:250px;字体系列:Arial;高度:自动；向左飘浮;边距:0 20px 15px 0px;}.single_post_content{width:335px;字体系列:Arial;高度:自动；浮动:右；}.featured_post {溢出:隐藏；向左飘浮;字体系列:Arial;/*border:1px solid #ccc;*/margin-bottom:20px;}.featured_post h2 {颜色:#a3d34c;边距:5px 0 15px 0;}.featured_post img {margin:10px 15px 15px 5px;边界:无；向左飘浮;}.featured_post p {高度:自动；浮动:无；字体:18px，字体系列:Arial；字体粗细:正常；文本对齐:对齐；填充:0 8px 5px;}.home_post .post_content{ width:auto!important;高度:自动；浮动:无！重要；字体系列:Arial;填充:5px 5px 10px 0;}.home_post img { 宽度:250px;高度:自动；向左飘浮;边距:4px 30px 0px 0px;}.home_post.page_single .featured_image{ padding-left:10px;填充顶部:10px;高度:200px；边距底部:10px;}.home_post.page_single .featured_image img{ width:600px;最大宽度:600px 高度:自动；向左飘浮;保证金:0;}.home_post.page_single h2{ 颜色:#B400B4;边距顶部:20px;字体系列:Arial;左边距:10px;}.read_more{ 宽度:34px;高度:20px；字体大小:28px；边距:0 10px 10px 0;填充:7px 8px 5px;显示:块；文本对齐:居中；浮动:右；背景:#a3d34c;颜色:#fff;-webkit-border-radius: 0px;-webkit-border-bottom-left-radius: 0;-moz-border-radius: 0px;-moz-border-radius-bottomleft: 0;边界半径:0px；边框左下角半径:0；}.first_post .post_content{ 宽度:300px;高度:自动；浮动:右；填充:5px 5px 10px 0;}.first_post img{ margin:5px 15px 15px 3px!important;}.first_post span{ 显示:无；}.first_post h2, .read_more{ 显示:无；}.first_post .read_more{ 显示:无！重要；}.first_post h3{ 显示:无；}.first_post h4{ 显示:无；}.out_post{width:585px;高度:自动；向左飘浮;填充:10px 15px;边框:1px 实心 #ccc;}#single_post_head{ 高度:自动；向左飘浮;填充底部:15px;字体系列:Arial，边框:1px 实心 #ccc;填充:10px;}#single_post_head .home_post{ 颜色:#000;}.single_post{宽度:100%；高度:自动；向左飘浮;字体系列:Arial;填充底部:15px;边框顶部:1px 实心 #ccc;}.single>h2 {margin:10px 0 15px 0;}/*.single p{float:left;字体:18px，字体系列:Arial；文本对齐:对齐；}*/.single>span {float:left;字体:18px，字体系列:Arial；宽度:275px；高度:自动；}#para {font:16px Arial;}#cus_single h2 {边距:10px 0 20px;}#cus_single span {float:left;字体:18px，字体系列:Arial；宽度:120px；高度:自动；}#cus_single p {float:left;宽度:150px；高度:自动；}#cus_single>p:nth-child(2) {float:left;字体:18px；字体系列:Arial 高度:自动；最小高度:120px；宽度:220px;}#course {padding:13px 0 0 0;}#course>h2{float:left;边距:10px 0;宽度:230px；字体大小:20px;}#course>a {float:left;显示:块；填充:8px 15px;背景:#B2CF39;颜色:#fff;字体大小:16px；左边距:70px；-webkit-border-radius: 0px;-webkit-border-bottom-left-radius: 0;-moz-border-radius: 0px;-moz-border-radius-bottomleft: 0;边界半径:0px；边框左下角半径:0;}#customText {宽度:885px;高度:自动；向左飘浮;边距底部:15px;}#customText h3 {margin:0 0 5px;字体大小:16px；}#customText .textwidget {font-family: Arial;字体大小:14px；文本对齐:对齐；自动换行:断字；行高:24px；}#custom_social {宽度:870px;高度:自动；边距:20px 0 40px;}#telefon { 浮动:对；行高:22px；边距顶部:2px；宽度:305px；}.single_child {宽度:100%;高度:自动；向左飘浮;填充底部:15px;边框底部:1px 实心 #ccc;}.nothing { 字体大小:15px;背景颜色:透明；边框:0px 实心；}/********************************************************************************************************************************* 侧边栏 ************************************************/.sidebar{ 宽度:250px;高度:自动；浮动:对；边距:0px 0 0 12px;背景:#fff;}#sidebar_widgets {width:230px;高度:自动；向左飘浮;填充:8px 5px;底边距:5px；背景:#a3d34c;颜色:#fff;字体系列:Arial;-webkit-border-radius: 10px;-webkit-border-bottom-left-radius: 0;-moz-border-radius: 10px;-moz-border-radius-bottomleft: 0;边框半径:10px；边框左下角半径:0;}#sidebar_widgets li {float:left;边距:10px 10px 10px 35px;列表样式图片:网址(图片/列表样式.png)；字体大小:14px；字体粗细:粗体；}.sidebar_widgets {width:230px;高度:自动；向左飘浮;填充:8px 5px;边距:10px 0px;颜色:#000；}#newsletter { 字体大小:14px;字体系列:Arial；宽度:213px；填充:10px；高度:自动；边框:1px 实心 #ccc;}#newsletter img {float:left;高度:40px；宽度:40px;}#newsletter h3{text-transform:uppercase;宽度:140px；颜色:#55247a；显示:块；向左飘浮;填充:0;边距:10px 0 10px 10px;}#newsletter h3 span {font-family: Arial;字体大小:16px；颜色:#b400b4;}#newsletter a:link, a:visited, a:hover {font-family: Arial;颜色:#55247a;}#facebook { 宽度:213px;填充:10px；高度:20px;}#facebook h3{text-transform:lowercase;字体大小:22px；颜色:#55247a；显示:块；向左飘浮;填充:0;边距:10px 11px;}#facebook h3 span {color:#b400b4;}#facebook .fb-overlay {位置:相对；左:0！重要；}#google { 宽度:213px;填充:10px 10px 0;高度:30px；边框:1px 实心 #ccc;}#google h3{font-size:22px;边距:0 0 2px 0;填充:0;颜色:#B400B4；显示:块；向左飘浮;}#google span:nth-child(2) {font-size:35px;}#google>span:nth-child(4) {font-size:25px;font-family:JellykaCuttyCupcakes, HarabaraHand;边距右:15px;浮动:右；}#google img {垂直对齐:中间；左边距:10px;}.testimonial_slides {height:300px;宽度:100%;}.Home_post{宽度:608px;向左飘浮;}.home_post ul{ 列表样式:无；}.home_post ul li{ 宽度:100%;向左飘浮;底边距:30px；边框:1px 实心 #A5A5A5;}.home_post img{ width:250px;高度:自动；边距:10px 20px 15px 5px;}.Home_post .post_content{ 宽度:325px;高度:自动；浮动:右；}/************************************************页脚********************************************/.footer{width:960px;高度:自动；向左飘浮;字体系列:arial;填充:0px 0 30px 0px;背景:#6e6e6f;}.footer_left {高度:自动；宽度:35%；边距:10px 0 0 15px;填充:0;向左飘浮;}.footer_left h3 {颜色:#fff;底边距:15px；左边距:0;}.footer_left a{ 宽度:100%;高度:自动；向左飘浮;字体大小:14px；边距底部:5px;}.footer_left a:link, a:hover, a:visited {color:#fff;}.footer_left .menu {list-style:none;左边距:3px;}.footer_left .menu li{font-size:18px;边距:4px 0;}.footer_right {高度:自动；宽度:25%；边距:10px 0 0 15px;填充:0;向左飘浮;}.footer_right ul { margin-left:17px;填充:0;}.footer_right img {vertical-align:middle;边距:0 10px 5px 0;高度:23px；宽度:23px;}.footer_right h3 {颜色:#fff;底边距:15px；左边距:15px;}.footer_right a{ 宽度:100%;高度:自动；向左飘浮;字体大小:14px;}.footer_right a:link, a:hover, a:visited {color:#fff;}.Social_Widget {margin-left:17px;}.clear {clear:both;}/* nsu 形式 */.nsu-form input[type=text] { width:220px;填充:13px 10px 7px;字体大小:18px；颜色:#fff;边界:无；背景:#D1D7C8；-webkit-border-radius: 10px;-webkit-border-bottom-left-radius: 0;-moz-border-radius: 10px;-moz-border-radius-bottomleft: 0;边框半径:10px；边框左下角半径:0；}.nsu-form p:nth-child(2) {margin:5px 0 0 80px;}.nsu-form input[type=submit] {background:#b400b4;颜色:#fff;宽度:自动；游标:指针；}.nsu-form 标签 {font-family:arial;字体大小:22px；颜色:#55247A；边距右:10px;}.nsu-error {margin-left:10px;红色;}.sign_up .nsu-signed-up {font-family:tahoma;字体大小:20px;}.sign_up {宽度:600px;高度:自动；填充:0;保证金:0;向左飘浮;}.sign_up h3 {font-family:Arial;字体大小:22px；填充:0;边距:5px 0 15px;}.sign_up img {width:600px;高度:200px；边距:5px;}}

有什么想法???为什么只有页脚没有变成全宽???

请...

解决方案

你应该移动你的页脚

... .container 和 .wrapper 等容器中的 width:902px; /p>

HTML:

 
<!-- 页脚内容-->
<!-- 页脚结束-->

<!-- 容器末端的宽度为:902px --></html>

变化: