The following HTML works OK on IE 11 and all other browsers. But, on IE 10 and below, the 100% height would push the bottom part off the screen.
<!DOCTYPE html>
<html>
<head>
<style>
html
{
height: 98%;
}
body
{
overflow: hidden;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
<tr>
<td style="width: 100%; height: 100%;">
<table cellspacing="0" cellpadding="0" style="border-bottom: #d7d7d7 1px solid; width: 100%; height: 100%;">
<tr>
<td style="height: 100%;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 100%;">Copyright</td>
</tr>
</table>
</body>
</html> In that example, the html style is 98%. It is suppose to be 100%. But, if I put 100%, the Copyright line will be off the screen. I am trying to find what has to be adjusted to obtain compliance of the rendering on IE 10 and below so it would work as it does for IE 11 and all other browsers.
Note that this is html that I simplified as much as I could to provide a working example. So, if you paste it as is and open the page in your browser, you will see the Copyright line a little bit because I adjusted temporarily the height to 98%, where it should be at 100%.
The goal is to force the footer line to be right at the bottom.
