页脚CSS问题

我正在制作一个Wordpress主题，但是页脚有点问题。我希望它占据窗口的100％，但它只占用1200像素。我不知道为什么会这样。在这里，您有CSS代码页脚CSS问题

#navigationposition { 
    float:left; 
    color:#fff; 
    width: 100%; 
    height:200px; 
    position:relative; 
    bottom:0; 
    left:0; 
    background-attachment: fixed; 
    background-origin: initial; 
    background-clip: initial; 
    background-repeat: no-repeat; 
    background-position: 100% 0; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg"); 
}

Here's the link to the website

来源

2014-12-28 danula

看起来好像没什么问题 – vsync

通过检测器检测你的页面。打开和关闭标记时出现不匹配，使页脚看起来在内容区域内。 –

你DIV id=#container约束体页脚不超过1200px。这是发生在这里：

#container { 
max-width: 1200px; 
background-color: transparent; 
margin: 0 auto; 
}

你可以把你的页脚的内容从容器中或从容器规则中删除max-width:1200px。

希望得到这个帮助。

来源

2014-12-28 22:51:08 robjez

谢谢！ @robjez – danula

您的页脚是div#container内具有1200像素宽度。搬出你div#navigationposition从div#container，它应该是好的;）

来源

2014-12-28 22:50:49 Maxime

这意味着你将这个div（导航位置）放在另一个具有固定宽度的地方，并且正在限制你的DIV。如果你不能访问正在构建你的代码，（很少有网站不允许你改变容器），那么我认为唯一可能的方式是使这个DIV（导航位置）绝对值为bottom = 0（结果不会是同样的，当你滚动）如果你能haveaccess所有代码，然后更改包含DIV（navigationposition的div的宽度）

/*if you can change it*/ 

#container { 
    /*width:1200px;*/ 
    width:100%; 
} 

    /*Only if you cannot change its container*/ 

#navigationposition { 
    float:left; 
    color:#fff; 
    width: 100%; 
    height:200px; 
    position:absolute; 
    /*position:relative;*/ 
    bottom:0; 
    left:0; 
    background-attachment: fixed; 
    background-origin: initial; 
    background-clip: initial; 
    background-repeat: no-repeat; 
    background-position: 100% 0; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg"); 
}

来源

2014-12-28 22:58:40

回答

相关问题