- 01
 - 02
 - 03
 - 04
 - 05
 - 06
 - 07
 - 08
 - 09
 - 10
 - 11
 - 12
 - 13
 - 14
 - 15
 - 16
 - 17
 - 18
 - 19
 - 20
 - 21
 - 22
 - 23
 - 24
 - 25
 - 26
 - 27
 - 28
 - 29
 
                        <!DOCTYPE html>
<html>
<head>
<style>
	*{ margin: 0; padding: 0; }
	html,body{
		height: 300px;
		width: 100%;
		border: 1px solid #C0C0C0;
	}
</style>
</head>
<body>
<table height=100%>
	<tr>
		<td><div style="border: 1px solid green;">fasdfadsf<br />fasdfadsf<br />fasdfadsf<br />fasdfadsf<br /></div></td>
	</tr>
	<tr height=100%>
		<td height=100%><div style="height:100%; border: 1px solid red;">fadsfadsfasd</div></td>
	</tr>
</table>
<!--
<div style="height: 100%; border: 1px solid blue; ">
	<div style="border: 1px solid green;">fasdfadsf<br />fasdfadsf<br />fasdfadsf<br />fasdfadsf<br /></div>
	<div style="height:100%; border: 1px solid red;">fadsfadsfasd</div>
</div>
-->
</body>
</html>
                                 
        
По 1рх для HTML и BODY с двух сторон. Вот как раз на 4px и растянулось.
А вообще, порочная практика трогать html и body. Для них достаточно обнулить внешние и внутренние отступы. Для остального — используйте блоки или таблицы. И уже с ними делайте все, что хотите.