如何在父元素为body元素的div上使用％（而不是vh）高度单位？

Question

当我设置简单的HTML模板并向主体添加div时。当我将宽度设置为50％时，div就是窗口/主体元素的50％。当我将高度设置为50％没有任何反应时，如果我有一个H1标签到div高度，它只是默认div的高度为H1标签的高度。

无论如何使用％值来简单地使用vh单位将窗口高度的50％设为而不是，或者是使用vh单位或添加绝对高度值的唯一替代方法即2000px？

示例：

HTML

<div id="wrapper">
  <h1>Video Demo</h1>
</div>

CSS

#wrapper {
width: 50%;
height: 50%;
background: #e6e6e6;
display: block;
text-align: center;
}

非常感谢任何解释或提示。

艾米丽，