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

绝对位置适合你

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

Answer 2

尝试width: 100vw;，这意味着100个视口宽度。并且与容器无关，如百分比。你仍然需要将它放在左边。

Answer 3

您可以通过绝对定位.footer来完成此操作。将您拥有的内容更改为以下内容。

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

如果您将position: relative;添加到.wrapper，则无效，您的页脚将包含在.wrapper中。

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

Answer 4

尝试添加此内容：

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

jsFiddle

Answer 5

问题是String data="MyTest"; textView.setText(data); textView.setText(Html.fromHtml(data)); textView.setMovementMethod(LinkMovementMethod.getInstance()); textView.setLinksClickable(true);类的宽度设置为wrapper，导致980px类的宽度设置为100％时，只有footer的宽度980px 1}}。

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

将宽度扩展到100％

5 个答案: