Having an issue with the sticky footer in Chrome while everything looks fine in FF and IE. When resizing the screen, the content wraps properly, but the footer does not adjust and overlaps the content. Any tips or suggestions would be greatly appreciated.
Currently using ASP.Net and Bootstrap 3.
CSS..
html,form,body {
height: 100%;
/* No padding or margin for html and body elements. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
body { padding-top: 100px;}
HTML
<form id="form1" runat="server">
<div id="wrap">
<!-- header -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div style="float:left;"><h1><kbd>System</kbd></h1></div>
<div style="float:right;">
<ol class="breadcrumb">
<li><asp:LinkButton>Page 1</asp:LinkButton></li>
<li><asp:LinkButton>R2</asp:LinkButton></li>
<li><asp:LinkButton>D3</asp:LinkButton></li>
<li><asp:linkButton>A4</asp:linkButton></li>
<li class="active">F5</li>
</ol>
</div>
</div>
</nav>
<div class="container">
<!-- Begin page content -->
</div>
</div>
<div id="footer">
<div class="container">
<!-- footer -->
</div>
</div>