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

Question

我期待将父DIV设置为完整100％屏幕高度的70％。我给自己定了下面的CSS，但它似乎并没有做任何事情：

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

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

Answer 1

使该位置的位置absolute。

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

Answer 2

这是解决，

添加html也100%

html,body { 

    height: 100%; 
    width: 100%; 

} 

Answer 3

尝试使用视口高度

div { 
    height:100vh; 
} 

它已经讨论here详细

Answer 4

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

const height = 0.7 * screen.height 

// jQuery 
$('.header').height(height) 

// Vanilla JS 
document.querySelectorAll('.header')[0].style.height = height + 'px'