如何使用任何高度的div填充屏幕上的可用高度？

Question

我想用<header>：

填充任何尺寸的屏幕（宽度和高度）

<header></header>
    <div id="content"></div>
<footer></footer>

<header>应该始终在iPad的任何高度的显示器上填满整个屏幕，这样<div id="content">的内容只会在滚动后才能看到，而不是在此之前。

Answer 1

只需提供您的html，body＆amp; header高度为100％：

html, body, header {
    height: 100%
}

http://jsfiddle.net/tujsj/

Answer 2

你可以使用新的，非常有用的 - 我无法想象 - 花了很长时间的{3}} CSS单元：

<header style="height: 100vh"></header>
    <div id="content">must scroll to see this</div>
<footer></footer>

Answer 3

您是否尝试过使用javascript，尤其是jquery来处理这个问题？

如果在头标记中包含jquery，则可以使用以下内容：

$(document).ready(function(){
    $("#header").height($(window).height());
});