How to figure out the height of a div for mobile browser
===

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
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Sohalo Test</title>
    
    <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;
	}