DIV高度设置为屏幕百分比？

我正在设置父DIV为完整100％屏幕高度的70％。 我已经设置了下面的CSS，但它似乎没有做任何事情：

body { font-family: 'Noto Sans', sans-serif; margin: 0 auto; height: 100%; width: 100%; } .header { height: 70%; } 

出于某种原因，它似乎并没有工作，但标题不是屏幕尺寸的70％。 有什么build议？

Answer 1

尝试使用“视口高度”

 div { height:100vh; } 

这里已经详细讨论了

Answer 2

这是解决scheme ，

添加html也到100%

 html,body { height: 100%; width: 100%; } 

Answer 3

使该位置的absolute位置。

http://jsfiddle.net/btevfik/KkKeZ/

Answer 4

如果你想要基于屏幕高度，而不是窗口高度：

 const height = 0.7 * screen.height // jQuery $('.header').height(height) // Vanilla JS document.querySelectorAll('.header')[0].style.height = height + 'px'