问题
I'm building this site (www.ellamatthew.com) in Magento. I need a full-width page but the way the Magento CSS is templated, I haven't been able to create it without using "Position:absolute" 100% width in CSS. This creates an issue with the footer not going below the image.
Here's the original Magento CSS that frames the page:
.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; }
Here's the custom CSS that I've put into Magento but it still doesn't recognize it. There's still a forced space on either side of .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; }
Here's my absolute code:
.homepage {position: absolute;left:0px; top:150px; float:left; width:100%; height:100%; }
The footer is overlapped on the page when I do this. Does anyone have a solution to either force the body content to 100% or move the footer down below the absolute.
Any answers to any of these would be greatly appreciated as I've tried so many things with no luck. Thanks
回答1:
<div class="main col1-layout">...</div>
Try using .main.col1-layout {float:none; width:100%; padding-top:0px;}
EDIT
To see how to do this, I looked at the source of the page (via inspect element in chrome, or firebug in firefox). Then I looked at the various elements that could be causing the issue, and I noticed the css had it set to be 920px. Once this was overridden it showed up correctly. You might still have some issues with layouts more than 1 column wide (if you decide to use them).
来源：https://stackoverflow.com/questions/17236344/full-page-width-without-using-absolute-positioning