浏览器是否自动设置最小高度？如何摆脱它

My HTML content starts like this

我的HTML内容就是这样开始的

<!DOCTYPE html>
<html lang="en">

When this page is rendered in Chrome[Version 42.0.2311.135 m (up to date)], there is a lot of white space between my content and the footer. The reason was that Chrome renders this page starting like this. I got this when inspecting via Firebug lite.

当此页面在Chrome [版本42.0.2311.135 m(最新)]中呈现时,我的内容和页脚之间会有很多空白区域。原因是Chrome渲染此页面的方式是这样的。我通过Firebug lite检查时得到了这个。

<html lang="en" debug="true" style="min-height: 667px;">

When this page is rendered in Firefox[Version 37.0.2(up to date)], there is no extra white space between my content and footer. This is the expected result.

当此页面在Firefox [版本37.0.2(最新)]中呈现时,我的内容和页脚之间没有额外的空白区域。这是预期的结果。

When inspecting via Firebug, I got this,

通过Firebug进行检查时,我得到了这个,

 <html lang="en" style="min-height: 280px;">

Question: Why different browser is setting the min-height automatically differently for the same viewport? how to get rid of it? I mean I don't need that 667px, so that that white space can be eliminated.

问题:为什么不同的浏览器会为同一视口自动设置不同的最小高度?如何摆脱它?我的意思是我不需要667px,因此可以消除那个空白区域。

2 个解决方案

#1

try normalize css, It makes browsers render all elements more consistently, http://necolas.github.io/normalize.css/

尝试规范化css,它使浏览器更加一致地渲染所有元素,http://necolas.github.io/normalize.css/

#2

Remove all inline css (in style attribute) about height - height and min-height and use little trick in your css:

删除关于height - height和min-height的所有内联css(在style属性中)并在你的css中使用小技巧:

html, body {
    min-height: 100%;
    height: auto;
}

#1