使div高度与视口相同

Question

17

我正在设计一个网站，希望顶部与视口一样高，就像这个网站一样。

我该如何做到这一点?

无论我使用什么显示器，底部始终位于屏幕底部?

谢谢

- Ollie2619

1

在页面上，您提到了一个示例，即在页面加载后通过JS更新第一个“header”的高度。 - dr.dimitru

2个回答

7

如果您想将分隔符设置为与窗口高度相同，请设置：

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

这个问题在这里经常被问到，最好先搜索一下。 :-)

- James Donnelly

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Enis P. Aginić · Accepted Answer

我知道这是一个老问题了，但你也可以使用vh（视口高度）单位。它被所有现代桌面浏览器支持，在移动设备上可能会创建一些问题，所以需要使用媒体查询来解决。

div {height:100vh;}

视口高度的百分之百。

这里是一个W3C草案，规定了相对长度单位，在使用它们之前，请检查Internet Explorer的支持情况，因为它并不支持每个单一的单位。