宽度：在移动设备上 100% 未填满屏幕答案

【问题标题】：Width: 100% not filling up screen on mobile devices宽度：在移动设备上 100% 未填满屏幕
【发布时间】：2013-06-07 20:23:45
【问题描述】：

我目前正在尝试针对移动设备优化 Wordpress 网站，但我正在努力让网站的页脚配合。该网站在这里： http://whitehallrow.com/

在移动设备上加载时，正文的宽度会根据屏幕尺寸缩小，并将所有包含的文本包含在其中。但是，页脚保持其宽度，我理解这是因为宽度是硬编码的，以便在计算机屏幕上看起来不错。我在 CSS 中进行了媒体查询，目标是屏幕宽度为 500 像素或更小的设备，以使页脚调整为正文的宽度。这是我一直在调整的 CSS 的 sn-p：

@media screen and (max-width: 500px) {
#customfooter{
        width:100%;
}
}

无论出于何种原因，这都不起作用 - 它仍然显示页脚比正文宽得多。我试过 max-width:100%, width:auto; max-width:auto，它们都不起作用。

如何在不进行硬编码的情况下实现这一点？

【问题讨论】：

标签： css mobile width screen compatibility

【解决方案1】：

从

更改您的 CSS

#teakfooter {
    width: 100%;
}
#verybottom {
    width: 100%;
}

添加一个类以便获得更高的优先级

.page #teakfooter {
    width: 100%;
}
.page #verybottom {
    width: 100%;
}

我使用 Firebug 进行了尝试，它似乎像这样运行良好。

编辑：在 cmets 中查看了更多内容后，我注意到有几件事导致页脚未填写。

.site {
    padding: 0 1.71429rem;
}

这导致#customer 页脚两边都有填充。

#teakfooter {
    margin-left: -40px;
}

这导致 #teakfooter 在右侧有空格。

【讨论】：

当我将它加载到我的黑莓 Bold 上时，页脚确实会缩小，但它变得太窄，只占正文宽度的 80% 左右......
尝试用这个来更新你的 CSS： .page #customfooter { height: auto;边距：0；宽度：100%； }
高度：自动；不知何故，#customfooter 消失了，margin:0;保持 div 比 body 窄并居中。
我明白您所说的客户页脚随高度消失是什么意思：自动。背景消失了，但内容仍然存在。我尝试添加一个 div 来清除所有浮动，以便 height: auto 保持背景图像，但它最终平铺但没有解决宽度问题，这是重点。 .site 上有一些填充导致这种情况发生。还有一个margin-left：-40px； #teakfooter 导致它无法填满整个屏幕。

【解决方案2】：

您也可以在萤火虫中检查指标（在右栏中，您有计算样式、样式、指标等）。在 METRICS 你会看到你的身体周围有一个padding: 24px;

解决方案：

body {
  padding: 0; 
}

【讨论】：