<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Brandon Inoices</title>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>
<link href="css/normalize.css" rel="stylesheet" />
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<table width="100%" border="1" height="1000px">
<tr>
<td valign="top" align="left" width="20%">
<div class="container">
<nav>
<ul class="mcd-menu">
<li>
<a href="">
<i class="fa fa-home"></i>
<strong>Home</strong>
<small>sweet home</small>
</a>
</li>
<li>
<a href="" class="active">
<i class="fa fa-sign-in"></i>
<strong>Invoice</strong>
<small>Invoices</small>
</a>
</li>
<li>
<a href="">
<i class="fa fa-envelope-o"></i>
<strong>Contacts</strong>
<small>drop a line</small>
</a>
</li>
<li class="float">
<a class="search">
<input type="text" value="search ...">
<button><i class="fa fa-search"></i></button>
</a>
<a href="" class="search-mobile">
<i class="fa fa-search"></i>
</a>
</li>
</ul>
</nav>
</div>
</td>
<td width="80%" valign="top" align="center">
<br />
<iframe src="Invoices.html" id="idIframe" onload="iframeLoaded()" name="detail" align="center" frameborder="0" height="100%" width="98%" scrolling="no" style="margin-left:-15px"></iframe>
</td>
</tr>
</table>
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if (iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + 400 + "px";
}
}
</script>
</body>
</html>