Magento - 如何将页脚设置为 100% 宽度？答案

【问题标题】：Magento - How to set footer to 100% width?Magento - 如何将页脚设置为 100% 宽度？
【发布时间】：2015-01-05 10:38:14
【问题描述】：

我想知道如何将页脚宽度设置为 100%？我尝试将 .footer-container 和 .footer 宽度设置为 100% 以及绝对位置。

这是网站：

http://buysmartcardsonline.com/

【问题讨论】：

您的页脚设置为其父容器的 100%。此外，您应该提供自己的代码，而不是指向您网站的链接。你希望它是浏览器窗口的 100% 吗？

标签： css magento footer

【解决方案1】：

如果您将div.footer-container 移到div.page 容器之外，它应该会自动覆盖页面的宽度。

之前：

<div class="page">
    ...

    <div class="footer-container">...</div>
</div>

之后：

<div class="page">
    ...
</div>
<div class="footer-container">...</div>

【讨论】：

我应该在哪个 Magento 文件上执行此操作？页面.xml？谢谢你:)
@ActiveCard：我对 Magento 一无所知，但在我的答案中查找包含标签的文件/模板，对其进行编辑并保存。应该做的伎俩。

【解决方案2】：

正如@Hubro 在他的回答中提到的，将div.footer-container 移到div.page container 之外是理想的。但是，如果您不想移动 div，您可以尝试对页脚使用绝对定位，如下所示

.wrapper{
   position: relative;
}

.footer-container{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -27px; (height of the footer container)
}

【讨论】：

【解决方案3】：

从class="page" 中删除class="footer-container" 并使其成为class="wrapper" 的直接子代

来自

到

【讨论】：

【解决方案4】：

试试下面的代码 - 我希望这就是你要找的

.footer-container {
                   left: 0px;
                   width: 100%;
                   position: fixed;
                   bottom: 0px;
                   }

【讨论】：

【解决方案5】：

您应该将 .footer-container 放在 .page 之外，然后在 .footer-container 中添加一个 div ，其类为 .page 以使页脚内的内容具有相同的宽度。

<div class="page">Your page content</div>

<div class="footer-container">
    <div class="page">
       Footer Content
    </div>
</div>

【讨论】：

我在哪里做呢？在 Magento page.xml 上？谢谢你:)
无论您的页脚位于您网站的哪个位置。