Question

在我的网站上我使用Bootstrap v3.1.1并且我有一个粘性页脚，使用可在此处找到的基本代码和样式 - ＆gt; http://getbootstrap.com/examples/sticky-footer/

在我启用Google Translate插件（translate.google.com/translate_tools）之前，一切正常！这里是Google Translate示例代码示例：

<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>

添加Google翻译按钮后，页脚会从底部停留，而是漂浮在页面中间的相同位置。

有关如何纠正此问题的任何建议......如果可能的话，我希望在我的网页上设置粘性页脚和Google翻译插件。

谢谢，尼尔

Answer 1

出于某种原因，谷歌翻译改变了浏览器处理页脚位置参考的方式。要修复它，基于bootstrap stick-footer示例，您需要在css上重新定位页脚。

而是使用bottom：0;您需要将底部指令更改为与页脚高度相同但负值。

.footer { position: absolute; min-height: 250px; bottom: -250px; width: 100%; }

Answer 2

Google翻译会修改<html>代码的height样式以及<body>代码的position和min-height样式。为了解决这个问题，我修改了我的css文件，将它们重置为默认值：

html
{
    height: auto!important;
}

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

谷歌翻译与Twitter Bootstrap v3.1.1粘性页脚冲突

2 个答案: