I recently implemented a sticky footer design on my website, following the guidance of Ben Frain's book "Responsive Web Design with HTML5 and CSS3" (second edition). While it works flawlessly on most modern browsers, I encountered an issue with the Samsung Galaxy Note 2 built-in browser. Any insights as to why this might be happening? I would greatly appreciate any feedback or advice, especially from iPhone users who may have experienced similar challenges.
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Sticky footer</title>
</head>
<style type="text/css">
html, body{
margin: 0;
padding:0;
}
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
min-height: 100%;
}
#header{
background-color: #0FF;
}
#MainContent{
flex: 1;
}
#footer{
background-color: #0F9;
}
</style>
<body>
<div id="header">This is the header</div>
<div id="MainContent">This is the main content</div>
<div id="footer">This is the footer</div>
</body>
</html>