Question

我必须遗漏一些非常明显的东西，但我只是在尝试：

<div style="width:100%;height:100%;background-color:gray">
bla
</div>

但是div并未延伸到整个页面。

请参阅jsfiddle

为什么这不起作用，我怎样才能使它发挥作用？

Answer 1

<div style="width:100%;height:100%;background-color:gray;position:absolute;top:0;left:0;">
bla
</div>

Divs与父母相关。因此，如果body元素的高度也不是100％那么div不能在屏幕上伸展。您必须将其定位为绝对位置，然后它会延伸到整个页面，因为它不再受其父级的限制并移动到它自己的图层。

Answer 2

将height:100%;提供给html和body。

body,
html
{
    height: 100%;
    padding: 0;
    margin: 0;
}

Answer 3

将此CSS应用于HTML和正文：

html,body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

问题是HTML和BODY标记在用户代理样式表（内置于浏览器中的样式表）中应用了默认边距（行为类似于填充）。

更新：考虑到这个问题，我认为你的意思是“页面的整个宽度”，而不是整个高度。我已经更新了我的问题，包括整个宽度和整个高度。请务必准确地解释您的问题。

Answer 4

尝试将vw，vh css个单位替换为%

＆＃13;

<div style="width:100vw;height:100vh;background-color:gray;">
  bla
</div>

＆＃13;