Question

我正在Magento建立这个网站（www.ellamatthew.com）。我需要一个全宽度的页面，但Magento CSS的模板化方式，我没有能够在CSS中使用"Position:absolute" 100％宽度创建它。这会导致页脚不在图像下方的问题。

这是框架页面的原始Magento CSS：

.col-left { float:left; width:182px; padding:0 0 0; margin:0 0 -1px; }
.col-main { float:left; width:715px; padding:0 20px 20px; }
.col-right { float:right; width:182px; padding:0 0 0; margin:0 0 -1px; }

这是我放入Magento的自定义CSS，但它仍然无法识别它。 .col-main两侧仍然有一个强制空间：

.col-left { float:left; width:0px; padding:0 0 0; margin:0 0 -1px; }
.col-main {float:left; width:100%; height:100%; padding:0 10px 20px; }
.col-right { float:right; width:1px; padding:0 0 0; margin:0 0 -1px; }
.col1-layout .col-main { float:none; width:100%; padding-top:0px; }

这是我的绝对代码：

.homepage {position: absolute;left:0px; top:150px; float:left; width:100%; height:100%; }

当我这样做时，页脚重叠在页面上。有没有人有解决方案要么强制身体内容为100％，要么将页脚移动到绝对值以下。

任何这些的任何答案都会非常感激，因为我已经尝试了很多没有运气的东西。感谢

Answer 1

<div class="main col1-layout">...</div>

尝试使用.main.col1-layout {float:none; width:100%; padding-top:0px;}

修改

要了解如何执行此操作，我查看了页面的来源（通过chrome中的inspect元素或firefox中的firebug）。然后我查看了可能导致问题的各种元素，我注意到css将其设置为920px。一旦被覆盖，它就会正确显示出来。对于超过1列宽的布局，您可能仍会遇到一些问题（如果您决定使用它们）。

整页宽度不使用绝对定位

1 个答案:

修改