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>&copy; 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

Popular posts from this blog

user interface - How to replace the Python logo in a Tkinter-based Python GUI app? -

objective c - Greedy NSProgressIndicator Allocation -

how to set an OCR language in Google Drive -