如何用div填滿屏幕上的可用高度？

Question

我想用<header>填充任意大小的屏幕（寬度和高度）：

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

<header>應該始終在iPad上任何高度的顯示器上充滿整個屏幕，以使<div id="content">僅在滾動之后才能看到，而在滾動之前不會看到。

Answer 1

只需將html ， body和header的高度設置為100％：

html, body, header {
    height: 100%
}

http://jsfiddle.net/tujsj/

Answer 2

您可以使用新的且如此有用的我無法想象W3C這么長的vh CSS單元：

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

Answer 3

您是否嘗試過使用javascript（尤其是jquery）來處理此問題？

如果您在head標簽中包含jquery，則可以使用如下代碼：

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