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

【问题标题】：Google Translate conflicts with Twitter Bootstrap v3.1.1 sticky footer谷歌翻译与 Twitter Bootstrap v3.1.1 粘页脚冲突
【发布时间】：2014-05-07 09:46:00
【问题描述】：

在我的网站上，我使用的是 Bootstrap v3.1.1，我有一个粘性页脚，使用的基本代码和样式可以在这里找到 --> http://getbootstrap.com/examples/sticky-footer/

在我启用 Google 翻译插件 (translate.google.com/translate_tools) 之前一切正常...这里是示例 Google 翻译插件代码：

<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 翻译按钮后，页脚不再停留在底部，而是浮动在页面中间的同一位置。

关于如何纠正这个问题的任何建议......如果可能的话，我希望在我的页面上添加粘性页脚和谷歌翻译插件。

谢谢，尼尔

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 google-translate

【解决方案1】：

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

html
{
    height: auto!important;
}

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

非常感谢！一直在为这个问题苦苦挣扎