调整浏览器窗口大小时，页脚的宽度不是 100%答案

【问题标题】：Footer's width is not 100% when browser window is resized调整浏览器窗口大小时，页脚的宽度不是 100%
【发布时间】：2015-08-12 23:56:22
【问题描述】：

我有两个 div。一个是我的页面的正文，另一个是我的页面的页脚。即使我调整浏览器窗口的大小，页脚 div 也应该有 100% 的宽度。

我的网页是这样的：

当我调整浏览器窗口大小时，会出现滚动：

如果我水平滚动页面，我的页脚不再是宽度的 100%：

我应该怎么做才能使页脚 div 始终保持 100% 的宽度？

<body>
    <div id="header"></div>
    <div id="footer"></div>
</body>

#header {
    height: 500px;
    width: 1100px;
    margin: 0 auto;
    background: grey;
}

#footer {
    background: #6B191C;
    position: absolute;
    left: 0;
    height: 100px;
    width: 100%;
    margin-top: 60px;
}

【问题讨论】：

标签： html css

【解决方案1】：

我只是在这里找到解决方案：http://www.impressivewebs.com/fluid-header-footer-problem/

将最小宽度设置为与主 div (1100px) 宽度相同的页脚。

我将页脚的 css 更改为：

#footer {
    background: #6B191C;
    height: 100px;
    margin-top: 60px;
    min-width: 1100px;
}

并在正文中添加了一些属性：

body {
    width: 100%;
    margin: auto;
}

此链接显示一个存在此问题的网页和另一个应用了解决方案的网页：http://www.impressivewebs.com/demo-files/fluid-header-footer/

【讨论】：

【解决方案2】：

使用vw 而不是%。 1vh 等于浏览器视口的 1%。

#footer {
    background: #6B191C;
    position: absolute;
    left: 0;
    height: 100px;
    width: 100vw;
    margin-top: 60px;
}

相对长度不仅仅是vw。有：

vh - 相对于视口高度的 1%
vw - 相对于视口宽度的 1%
vmin - 相对于视口较小尺寸的 1%
vmax - 相对于视口较大尺寸的 1%

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/length

【讨论】：

@PedroEstevao 这不起作用，因为您的body 中有一些边距和填充。你必须用body{margin: 0;padding: 0}重置它
我添加了 body{margin: 0;padding: 0;} 正如你在我的 css 文件中所说的那样，但仍然没有工作。
那是因为您的网站太高并且正在添加滚动条，遗憾的是 vw 忽略了滚动条，因此请查看我的其他适合您的答案。 :)

【解决方案3】：

从您的页脚中删除 width 并添加 right: 0;。它会将您的页脚从左侧扩展到右侧。所以你的 CSS 将是这样的：

#footer {
    background: #6B191C;
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    margin-top: 60px;
}

这是工作示例http://codepen.io/anon/pen/MwRJqv。

【讨论】：

还是不行。我检查了您的示例，但它也不起作用。
我的例子怎么不起作用？我只是尝试用 Chrome、Firefox、Edge 和 Internet Explorer 打开它。它无处不在。给我发一张它在您的浏览器中无法使用的图片。
另外，你的屏幕分辨率是多少？因为你的标题 div 是 1100 像素宽，这就是它创建滚动条的原因。
我的屏幕分辨率是 1920x1080。这是您的示例图片无法在我的屏幕上显示：s8.postimg.org/u4qa3f6th/654.jpg
我不知道为什么这对你不起作用，它适用于除你以外的所有人。你用什么浏览器？

【解决方案4】：

最合理的原因是您的#footer id 包含 properties

    position: absolute;
    left: 0;
    right: 0;

这会影响 #footer 内width: 100%; 的布局，因此最快的修复方法是删除这些属性以恢复元素的正常流动。

【讨论】：

谢谢，但仅删除这些属性并不起作用。