I am trying to recreate the page http://www.rexonmedia.com/test/sohalo/images/html5_simpletest.png using HTML 5 and CSS3 but having trouble with the height. I measured the height of the footer with is 50px. It looks okay on the regular browser but on the mobile browser it looks really small. What am I missing here. Is there a tag or equation that will show it properly on the mobile browser?
HTML Test
<link rel="stylesheet" type="text/css" href="style/reset.css" />
<link rel="stylesheet" type="text/css" href="style/styles.css" />
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header> </header>
<div id="wrap">
<div id="main"> </div>
</div>
<footer> </footer>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
header{
width:100%;
height:50px;
background-color:#113b44;
}
#wrap {
min-height: 100%;
}
#main {
}
footer {
position:fixed;
bottom:0px;
width:100%;
background-color:#231f20;
height:50px;
}
