I'm in the process of replicating the layout found at using HTML5 and CSS3, but I'm encountering an issue with the height. I've measured the footer's height to be 50px. While it displays fine on desktop browsers, it appears significantly smaller on mobile browsers. What could I be overlooking? Is there a specific tag or formula I should be using to ensure it renders correctly on mobile devices?
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;
}