Prevent Google Translator from changing height of html to 100%

Question

I added a Google Translator widget to a site (using the code provided here: http://translate.google.com/translate_tools) and have the following issue:

It automatically adds a style attribute to the html tag whose value includes:

height: 100%

This is "breaking" the page layout. For example, CSS backround images that were positioned to "bottom" are now (incorrectly) positioned at the bottom of the view port.

Is there any way to prevent or fix this?

Answer 1

This resolves the issue:

/* Google Translate Overrides */
html, body{
    min-height: 0!important;
    height: auto!important;
    position: inherit!important;
}

Answer 2

I was able to solve this by setting the body min-height attribute in css as !important to prevent override.

body {
min-height: 0 !important;
}

UPDATE - Unfortunately, this no longer works. The Google Translation script will strip out any attempts you make to counter it's min-height style. I have both the above CSS in my stylesheet AND an inline style on the body tag.

The Google Translation script is pretty aggressive and I'm not seeing any way to disable this.

Answer 3

This should work:

html {
  height: auto !important;
}

body {
  position: initial !important;
  min-height: initial !important;
  top: auto !important;
}