After reading this article http://camendesign.com/code/developpeurs_sans_frontieres I have decided to follow what it says and eliminate wrappers from my site design. Gave my body element a width, give html and css different background colours.etc
Things are working fine, I'm really impressed by it until I need to add a footer. At this moment, I'm kind of stuck. Since my footer tag has to be inside the body element, it's width only extend to the width of the body element (which is 600px). and the white box still surrounds my footer instead of ending before my footer as expected.
Is there a way I can get the footer to be like any footer you see on other sites (where the footer span the full width of the page in 开发者_运维百科a different colour, without going back to wrapper divs?
Here's a screenshot:
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>
Be aware that it's not "sticky": http://jsbin.com/ifika6/2
First of all, set padding-bottom: 0 for the body and margin-bottom: 0 for the footer div (or whatever you used), that should make it touch the bottom.
If I were you then I will do the following things:
THE CSS
.wrapper{
margin:0 auto;
width:980px;/*your width will goes here*/
background: green;
}
.footer{
background: red; /*your style will goes here*/
}
THE HTML:
<div class="wrapper">
MainContent will goes here.....
</div>
<div class="footer">
this is footer.....
</div>
Hope it helps you to solve your problem......
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论