将宽度扩展到 100%

Question

我有一个固定宽度的容器。其中我有一个页脚卡在固定宽度的包装纸中。我想将页脚宽度扩大 100%。

我无法修改 html 代码。我需要指导如何使页脚 100% 保持在固定包装中。

我试图通过相对位置/绝对位置使其工作。

这是我的代码。

<style>
    .wrapper{ width:980px; margin:0 auto}
    .body{background:red}
    .footer{ width:100%; background:green}
</style>

<div class="wrapper">
    <div class="body">Main body contain</div>
    <div class="footer">Footer</div>
</div>

Answer 1

尝试 width: 100vw;，这意味着 100 视口宽度。并且与容器无关，例如百分比。您仍然需要将其置于左侧。

Answer 2

您可以通过绝对定位来做到这一点 .footer。将您拥有的内容更改为以下内容。

.footer {
    background:green;
    position: absolute;
    left: 0;
    right: 0;
}

如果您将 position: relative; 添加到 .wrapper，这将不起作用，您的页脚将包含在 .wrapper 中。

jsFiddle: http://jsfiddle.net/8qkes6ba/

Answer 3

尝试添加这个：

.wrapper{ width:980px; margin:0 auto}
.body{background:red}
.footer{ position:absolute; left:0; width:100%; background:green}

jsFiddle

Answer 4

问题是 wrapper class 设置为 980px 的宽度，这会导致设置 footer class 的宽度至 100% 仅与 980px.

一样大

<style>
  .wrapper{ width:980px; margin:0 auto}
  .body{background:red}
  .footer{ width:100%; background:green}
</style>

<div class="wrapper">
  <div class="body">Main body contain</div>
</div>

<div class="footer">Footer</div>

Answer 5

绝对位置适合您

   .footer {
    position: absolute;
        background:green;    
        left: 0;
        right: 0;
    }

将宽度扩展到 100%

Expand width to 100%

html

javascript

css

jquery

footer