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'