I'm struggling to achieve a split background on my site with two colors vertically, fullscreen in both height and width. Can anyone spot what I might be doing wrong here? Any help is much appreciated. Thank you.
You can view the test page here.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing fullscreen</title>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<table id="maintable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="table1">How do I make this section fullscreen in height?</td>
<td id="table2">
<div id="logomelonmania">
</div>
<table id="menu-div" >
<tr>
</tr>
</table>
<div id="paragraphtext"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body {
margin:0px;
}
tablepage {
border-spacing: 0;
border-collapse: collapse;
}
#table1 {
background-color: #88b56d;
width:50%;
height:100%;
}
#table2 {
background-color: #435;
height:100%;
width:50%;
}
#wrapper {
height:100%;
}
#maintable {
height:100%;
width:100%;
}