border on 100% height body creates scroll

I'm trying to figure out why the following creates a vertical scroll
bar.

Browser is IE 7 - using XHTML 1.0. I expand html and body to height
of 100% and then I want to put a border around the whole viewport.
What happens is that I get a vertical scrollbar (which I can hide, of
course).

Essentially what I'd like to know why adding a border increases the
block but not the 100% sized viewport (and thus the scrollbar).

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<style type="text/css">

html
{
height:100%;
margin: 0px;
padding: 0px;
border: 0px;
}

.bodyContent
{
height:100%;
margin: 0px;
padding: 0px;
border-right:Red 1px solid;
border-bottom:Red 1px solid;
}

</style>

</head>
<body class="bodyContent">
<table style="border-collapse:collapse;width:100%;height:100%"
cellpadding="0" cellspacing="0">
<tr>
<td>R</td>
<td>R</td>
<td>R</td>
<td>R</td>
</tr>
<tr>
<td>R</td>
<td>R</td>
<td>R</td>
<td>R</td>
</tr>
</table>
</body>
</html>
.

Relevant Pages