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