sticky footer with a 2 column main content layout
Hi all I am having trouble getting my footer to stick to the bottom of the page. I have followed all the usual advice but my left column seems to expand beyond it's container div, which consequently pushes the footer off the bottom of the page. I have a fairly complicated layout since I have a fair amount of collapsible panels via jQuery but I'll give you the basic structure.
Basic HTML:
<html>
<head></head>
<body>
<div id="container">
<div id="content_header"> <!-- collapsible top panel -->
</div>
<div id="show_content_header"> <!-- tab shown to expand top panel when minimized-->
</div>
<div id="content_left_panel"> <!-- collapsible left panel -->
</div>
<div id="show_left_panel"> <!-- tab shown to expand left panel when minimized -->
</div>
<div id="main_content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
And the CSS:
body
{ height: 100%;
margin:0;
padding:0;}
html, body, #container { height: 100%; }
body
#container { height: auto; min-height: 100%; }
#content_header
{ position:fixed;
width:100%;
left:0;
height:200px;
background:url(../images/image.png) repeat-x;
border:1px solid #000;
z-index: 100; }
#show_content_header
{ position:fixed;
z-index:2;
display:none;
width:100%;
height:40px;
开发者_开发百科top:40px;
left:0; }
#content_left_panel
{ position: absolute;
top: 235px;
left: 0px;
width: 200px; /*Width of frame div*/
height: auto; /*usually 100%*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
z-index:0;}
#show_content_left_panel
{ position:fixed;
left:0;
float:left;
padding-top:5px;
display:none;
width:0px;
height:30px;
cursor:pointer;
top:90px;}
#main_content
{ position: relative;
margin-left:210px;
margin-top: 235px;
margin-right:10px;
margin-bottom: 100px;
height: 100%;
overflow: hidden;
z-index:0;}
#footer {
position: relative;
z-index: 100;
height: 100px;
margin-top: -100px;
width:100%;
background:url(../images/image.png) repeat-x;
clear: both;}
As I said my footer remains at the bottom of page when the 90% of the time, but as soon as the #content_left_panel exceeds the height of the main content then the footer no longer remains at the bottom of the page, rather it is rooted to the bottom of the container div. I am confused as the #content_left_panel is breaking out of the container I am guessing it is something to do with it being a float!
Any help is much appreciated!
Cheers
I don't really understand what kind of layout you want but #content_left_panel has position:absolute; rule, so
It is removed from the normal flow entirely
(http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning)
加载中,请稍侯......
精彩评论