How to make the sticky footer not overlap other divs
I'm having this issue where the sticky footer, when zooming in a lot in the browser, overlaps the other divs on the page. Is there anyway to not make it overlap other divs and still have it function like a sticky footer?
Here is the HTML:
<div id = "mainWrapperDiv">
<div id = "mainDiv">
<div class = "test1div"> testing </div>
</div>
</div>
<div id = "footerDiv">
</div>
here is the css:
*
{
padding: 0px;
margin: 0px;
}
body, html
{
height: 100%
}
div
{
border: 1px solid;
overflow: hidden;
}
#mainWrapperDiv
{
min-height: 100%;
height: 100%;
margin-bottom: -200px;
}
#mainDiv
{
border: 1px solid;
margin: 0px auto 0px auto;
width: 1000px;
background: lightgreen;
overflow: hidden;
}
#mainDiv div.test1div
{
width: 20em;
height: 20em;
float: left;
}
#mainDiv:after
{
content: ".";
height: 0px;
display: block;
clear: both;
visibility: visible;
}
#footerDiv
{
height: 200px;
width: 100%;
clear: both;
background: lightblue;
overflow: hidden;
}
精彩评论