100% height scroll div with sticky header/footer

1 reply [Last post]

Mon, 2011-07-25 10:03

zima101

Offline

newbie

Last seen: 9 years 25 weeks ago

Timezone: GMT+1

Joined: 2011-07-25

Posts: 1

Points: 2

Hi,

My layout consists of a sticky header/footer with content that has a vertical scrollbar - the problem is the content is being hidden behind the header and footer.Have tried adding top/bottom margins 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>