<div>具有100％的窗口高度，由JavaScript强制执行

Question

我希望在我的网站上有一个元素，即使调整大小后，我也希望窗口的高度和宽度为100％。 宽度很容易：

#myElement {
    width: 100%
}

但是高度可能会引起一些问题。 在我看来，这很有意义：

window.onresize = function () {
    document.getElementById("myElement").style.height = window.innerHeight;
}

我的逻辑错了吗？ 因为这并不总是按计划进行。 让我们假设它不是IE，因为（我不认为）它们支持window.innerHeight。

Answer 1

您可以使用CSS实现此功能，而无需使用javascript。

div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: red;
}

和标记：

<div>
    <p>Hello</p>
</div>

此处的示例： http : //jsfiddle.net/CTGaP/

Answer 2

在元素上指定尺寸百分比时，它是相对于元素父级的尺寸。 因此，您需要确保div上方的所有元素的宽度/高度也都为100％

html, body {
    width:100%;
    height:100%;
}
div {
    width:100%;
    height:100%;
    background:yellow;
}

Answer 3

body { position: relative; }
div { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

Answer 4

假设div和body之间没有其他大小的元素，这是非常直接的：

身体{位置：绝对； 高度：100％; 宽度：100％；}

div {position：absolute; 高度：100％; 宽度：100％; 背景：红色； }

并根据需要进行其他宽度处理。