Question

我有两个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;
}

Answer 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/

Answer 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

Answer 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。

Answer 4

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

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

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

调整浏览器窗口大小时，页脚宽度不是100％

4 个答案: