Google Translate conflicts with Twitter Bootstrap v3.1.1 sticky footer

StackOverflow https://stackoverflow.com/questions/22704226

题

On my site I'm using Bootstrap v3.1.1 and I have a sticky footer, using the base code and styling that can be found here --> http://getbootstrap.com/examples/sticky-footer/

Everything works fine until I enable the Google Translate plugin (translate.google.com/translate_tools) ... here is sample Google Translate plugin code:

<div id="google_translate_element"></div><script type="text/javascript">
            function googleTranslateElementInit() {
              new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'ACCOUNTNUM'}, 'google_translate_element');
            }
            </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

After adding the Google Translate button the footer undocks from sticking at the bottom and instead floats in the same spot in the middle of the page.

Any suggestions on how I could correct this problem ... I'd like to have the sticky footer and also the Google translate plugin on my pages if possible.

Thanks, Neil

有帮助吗？

解决方案

Google Translate modifies the <html> tag's height style, and the <body> tag's position and min-height styles. To fix, I modified my css file to reset them to their default values:

html
{
    height: auto!important;
}

body 
{
    position: static!important;
    min-height: 0!important;
}

其他提示

For some reason, google translate change the way browsers process the footer position reference. To fix it, based on bootstrap stick-footer example, you need to reposition your footer on your css.

Instead use bottom:0; you need to change your bottom instruction to be the same as your footer height but a negative value. 

.footer { position: absolute; min-height: 250px; bottom: -250px; width: 100%; }
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top