Fixed height overlapping sticky footer

Vote count:

0

I have gone through a lot of sticky-footer attempts but none of them seem to work with the latest browsers so I tried to build my own purely with CSS.

The code is below. Since I'm a novice web developer I wanted to ask if anyone can see any issues with the below code. It seems to be working with latest chrome, firefox and safari. Backwards compatibility is not important at this stage.

HTML:

<div id=page-content>
*Page content*
</div>
<div id=page-footer>
*Footer content*
</div>

CSS:

#page-content {
overflow: scroll;
padding-bottom: 100px;
height: 100%
}

#page-footer {
height: 100px;
position: fixed;
bottom: 0;
z-index: 5;
background-color: black;
}

asked 21 secs ago

user3495758

1