中心和布局页面没有包装并且有页脚

阅读这篇文章http://camendesign.com/code/developpeurs_sans_frontieres 我决定按照它的说法去掉我的网站设计中的包装。给我的身体元素的宽度，给HTML和CSS不同的背景colours.etc中心和布局页面没有包装并且有页脚

事情工作正常，我真的印象深刻，直到我需要添加页脚。此刻，我有点卡住了。由于我的页脚标签必须位于body元素内部，所以它的宽度只能扩展到body元素的宽度（600px）。并且白色框仍围绕着我的页脚，而不是像预期的那样在页脚之前结束。

有没有一种方法可以让我得到页脚要像您在其他网站（见任何页脚在页脚跨度不同颜色的页面的整个宽度，而无需返回到包装的div？

下面是截图： enter image description here

来源

2011-04-04 learnjourney

您被限制为最大宽度为600px，因此最大宽度为600px，而不是宽度为100％。添加一个包装;） – Blender 2011-04-04 05:24:59

Live Demo

<!DOCTYPE html> 
<style> 
    html {height: 100%; width: 680px; margin: 0 auto; padding: 0; 
     background: #c72;} 
    body { min-height: 100%; margin: 0; padding: 0 20px; 
     border: 1px solid black; border-width: 0 1px; 
     font: 13px/20px "Helvetica Neue", Arial, Helvetica, sans-serif; 
     color: #333; 
     background-color: #eee;} 
    #footer { 
     position: absolute; 
     width: 100%; 
     left: 0; 
     background: #ccc 
    } 
</style> 
<body> 
    Lorem ipsum dolor sit amet.. 

    <div id="footer">footer</div> 
</body>

要意识到它不是"sticky"：http://jsbin.com/ifika6/2

来源

2011-04-04 22:28:08 thirtydot

+1会提示这一点。 – DouglasMarken 2011-04-05 08:11:15

我放弃了，最终决定不添加页脚，但是您的回答最接近它。 +1 :)。 – learnjourney 2011-04-09 11:01:06

首先，页脚DIV设置padding-bottom: 0的身体和margin-bottom: 0（或任何你使用），应使其触底

来源

2011-04-04 05:26:10

OP询问他们如何在“”为固定宽度的页面上制作100％宽度的页脚。 – Blender 2011-04-04 05:30:46

@Blender：“而白色方块仍围绕着我的页脚，而不是像预期的那样在页脚之前结束。” – 2011-04-04 05:32:23

呵呵，不要紧。 – Blender 2011-04-04 05:41:01

如果我是你，然后我。会做以下事情：

的CSS

.wrapper{ 
    margin:0 auto; 
    width:980px;/*your width will goes here*/ 
    background: green; 
} 

.footer{ 
    background: red; /*your style will goes here*/ 
}

的HTML：

<div class="wrapper"> 
    MainContent will goes here..... 
</div> 
<div class="footer"> 
    this is footer..... 
</div>

希望它可以帮助你解决你的问题......

来源

2011-04-04 05:51:07 enam

我的目标是看看是否有办法摆脱这种情况下的包装，因为那篇文章的重点。但是页脚也跨越整个页面。 :) – learnjourney 2011-04-04 05:58:48

两件事情进入我的脑海。 1.不应该使用的“表格”和2.“Liquid”CSS布局。你可以在这里查看第二个选项教程：http://css.maxdesign.com.au/floatutorial/tutorial0916.htm – enam 2011-04-04 06:09:53

中心和布局页面没有包装并且有页脚

回答

相关问题