The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, it does not work on Firefox as the size of the first row exceeds 70%. Any suggestions for a workaround?
Check out this JSFiddle: http://jsfiddle.net/4hyCh/
<body>
<div style="height: 100%;">
<table style="height: 100%;">
<tr>
<td style="height: 70%;">
<div class="mainDiv">
<!-- Row content goes here -->
</div>
</td>
</tr>
<tr>
<td>
<div class="footerDiv">
Copyright some company...
</div>
</td>
</tr>
</table>
</div>
</body>
CSS:
html
{
height:100%;
margin: 0px;
}
body
{
height:100%;
margin: 0px;
font-family: Verdana;
}
.mainDiv
{
background-color: #00FF00;
height: 100%;
overflow: auto;
}
.footerDiv
{
background-color: #FF00FF;
}