Wysokość DIV ustawiona jako procent ekranu?

Question

Szukam ustawienia DIV dla rodzica jako 70% pełnej wysokości 100% ekranu. Mam ustawione następujące CSS, ale nie wydaje się do niczego:

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

Z jakiegoś powodu nie wydaje się działać, choć i nagłówek nie jest 70% wielkości ekranu. Jakakolwiek rada?

Answer 1

Ustaw pozycję absolute dla tego elementu div.

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

Answer 2

To rozwiązanie ,

Dodać html także 100%

html,body { 

    height: 100%; 
    width: 100%; 

} 

Answer 3

Spróbuj użyć rzutni Wysokość

div { 
    height:100vh; 
} 

Jest już omówione here szczegółowo

Answer 4

Jeśli chcesz go na podstawie wysokości ekranu, a nie wysokość okna:

const height = 0.7 * screen.height 

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

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