html - Inconsistent behavior among browsers when implementing a 'sticky footer' -
i've lost count of how many posts i've read on subject. frankly not css expert. cook-booked 'sticky footer' works in firefox , chrome fails in ie9 , above. (its position in ie varies height of browser window. in other browsers fixed bottom.)
the css follows:
#footer { position:relative; margin-top: -150px; height: 150px; clear: both; bottom:0px; } the html (in master page) follows:
<footer> <div id="footer"> <div style="margin: auto;"> </div> <br /> <div style="text-align: center; margin: auto; margin-left: auto; margin-right: auto; width: 100%; margin-bottom: auto"> <p>© copywrite blurb , date here</p> </div> </div> </footer> suggestions?
i bit of noob too, feel 'position: relative' messing code. footer wrapped div?
maybe try wrapping page in content div height of 100%, position relative this, rather page.
or perhaps set body , html have height: 100%. current height of element surrounding footer?
just throwing few ideas out there. :)
Comments
Post a Comment