100% height inner div with sticky footer

[thompom]

Hi,

My layout consists of a sticky header/footer with content that has
a scrollbar - the problem is the content is being hidden behind the header and footer.
Have tried adding margin to sort issue which pushes content down from top but still cant see bottom.

CSS

#header {
position:absolute; 
top:0; 
left:0;
height:100px;
width:100%;
}

#content {
width:100%;
height: 100%;
overflow-x:hidden; 
overflow-y:scroll;
/*margins to stop content from being hidden by header/footer*/
margin-top:107px; 
/*margin-bottom:25px;*/
}

#footer {
width:100%;
background-color:#000000;
height:25px;
color:#FFFFFF;
padding:5px;
border-top:#cccccc 4px solid;
position:absolute; bottom:0; left:0;
}

PAGE

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

any ideas welcome

 

[vacunita]

Your content div has a height of 100%, that's 100% of its parent container which is the browser window. but since your header and footer also have a height well they also take up space in the window. They are absolutely positioned so they hover above the content div hiding its content.

What you are attempting to do is not really possible, as there is no way for a div to calculate the remaining space.

Perhaps a better alternative would be to keep the header fixed, and simply have the footer follow the content without it being absolutely positioned, or have a content div that is not 100% height.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[thompom]

thanks vacunita - how bout a jquery fix?

 

[vacunita]

I'm not that well versed in jquery.

Perhaps asking in the forum216 may be more helpful for that.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[darryncooke]

or just check this out

http://www.cssstickyfooter.com/

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services