div高度设置100%不生效问题

或者问题为如何设置div高度等于视口高度。前端高度问题一直是个坑，只要是子元素的排版一定要求要有宽高，但是body没有宽高这种说法。你还不能给它固定设置，因为不同屏幕的宽高不一样，只能用JavaScript获取宽高设置。说实话太捞了。

利用CSS3的新特点可以一劳永逸的解决问题。

视口百分比（或视口相对）长度

什么是视口百分比长度？

从上面链接的 W3 候选推荐中：

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

这些单位是vh（视口高度）、vw（视口宽度）、vmin（视口最小长度）和vmax（视口最大长度）。

如何使用它来使分隔线填充浏览器的高度？

对于这个问题，我们可以利用vh:1vh等于视口高度的 1%。也就是说，100vh等于浏览器窗口的高度，而不管元素在 DOM 树中的位置：

HTML

CSS

div {
    height: 100vh;
}

说实话，今天是我过的最爽的一天。