使 div 适合初始屏幕

Question

我想让一个 div 适合用户屏幕的初始高度和宽度。

我认为以下粗略绘制的图表更好地解释了这一点：

 #div
{
 width: 100%;
 height: 100%;
}

似乎不起作用

原文由 jonnnnnnnnnie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果我理解正确（这里有 一些 混淆的余地）：

http://jsfiddle.net/zRpNp/

 #screenFiller {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 15px solid orange
}

您可能在 position: fixed 版本之后：http: //jsfiddle.net/zRpNp/1/

原文由 thirtydot 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我个人喜欢纯 CSS 解决方案。只需使用 vh 单元。

 #filldiv
{
    height: 100vh;
}

这将使 div 填充浏览器窗口的高度。

另外，你也可以让它填满浏览器窗口的宽度，这个只用到 vw 单元。

 #filldiv
{
    width: 100vw;
}

两者都显示在 这个小提琴 中

我个人非常喜欢这两个单位，因为它们可用于动态调整字体大小等内容。

原文由 tinfoilboy 发布，翻译遵循 CC BY-SA 3.0 许可协议