Trying to achieve a consistent look across Chrome, IE(11), and FF for my responsive website has been a challenge.
The main issue I'm facing in IE is that when the site's content extends beyond the viewport, the scrollbar fails to reach the end due to the sticky page-footer ('page-footer'). I've attempted adding margin or padding to the page-main-area, but it hasn't made a difference.
Additionally, the sidebar background doesn't stretch to the full length as intended.
CSS snippet:
.page-sidebar {
padding: 10px;
border-top: 2px solid #000;
background-color: #00BB9C;
width: 100%;
padding-bottom: 58px;
}
.page-sidebar h3 {
color: black;
}
.page-sidebar h3:first-child {
margin-top: 0;
}
.page {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.page-main-area {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 8px;
background-color: #000;
color: #fff;
max-height: 50px;
}
HTML + CSS:
http://jsfiddle.net/mvz8rq1o/2/
Any suggestions on how to address these issues specifically in IE?