How can I make this nested footer sticky to the bottom?
I've been trying a few different things and I'm not sure how to make this footer stick to the bottom. The difficulty comes because there are a number of nested divs inside one another. What I want to achieve is have the border-right and border-left wrappers go to the bottom of the page to surround the footer, but the footer should be at the bottom of the page.
to explain a bit all the nested divs: the body has the main tiling background image applied to it and #background has a transparent overlay that makes it fade out toward the edges. the border-right and border-left divs have a repeating image as background that serves as borders to the content div.
And the footer div should be totally separate I know, but when I make it so it stays centered to the width of the window rather than the width of the border-left so it looks wonky when the screen gets shrunk down.
Basic page structure is as follows and I have also posted a jsfiddle: http://jsfiddle.net/cutcopypaste/zry4T/
<body>
<div id="background">
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="menu">
<p>Menu</p>
</div>
</div>
<div id="border-left">
<div id="border-right">
<div id="content">
<p>Page Content</p> 开发者_如何学运维
</div>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
My solution: http://jsfiddle.net/zry4T/15/
<body>
<div id="background">
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="menu">
<p>Menu</p>
</div>
</div>
<div id="wrapper">
<div id="border-left">
<div id="border-right">
<div id="content">
<p>Page Content</p>
</div>
</div>
</div>
<div id="push"></div>
</div>
</div> <div id="footer">
<p>Footer</p>
</div>
</div>
</body>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
line-height: 1.2;
}
body
{
background: #000 url(../images/bg-pattern.png) center top repeat;
}
#background
{
background: url(../images/overlay.png) center top repeat-y;
min-width: 960px;
padding-left: 1px;
}
#container
{
background: red center top no-repeat;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
overflow: hidden;
width: 960px;
z-index: 10;
}
#header
{
}
#logo
{
height: 114px;
width: 960px;
}
#logo a
{
border: none;
display: block;
height: 90px;
margin: 60px auto;
width: 640px;
}
#menu
{
background-color: orange;
}
#border-left
{
background: blue url(../images/border-left.png) repeat-y 1px -5px;
height: 100%;
margin: -4px auto 0;
width: 912px;
}
#border-right
{
background: blue url(../images/border-right.png) repeat-y 857px -5px;
height: 100%;
}
#content
{
background: yellow url(../images/stripes.gif) center top repeat;
margin: 35px auto 0;
min-height: 100px;
padding: 8px 33px 110px;
width: 738px;
z-index: 10;
}
#push {height: 60px;}
#wrapper{
width:960px;
margin:o auto;
}
#footer
{
background: green url(../images/footergradient.png) repeat-x;
height: 60px;
margin: 0 auto;
clear:both;
text-align: center;
width: 808px;
}
</style>
Does this point you in the right direction?
http://jsfiddle.net/zry4T/28/
I've basically placed the footer absolutely at the bottom of the wrapper, and made sure the wrapper is at least as tall as the content.
EDIT: Updated fiddle
加载中,请稍侯......
精彩评论