L'altezza DIV è impostata come percentuale della schermata?

Question

Sto cercando di impostare un DIV principale pari al 70% dell'altezza dello schermo del 100%. Ho impostato il seguente CSS, ma non sembra di fare nulla:

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

Per qualche motivo non sembra funzionare e anche se l'intestazione non è il 70% delle dimensioni dello schermo. Qualche consiglio?

Answer 1

marca posizione absolute per tale div.

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

Answer 2

Questa è la soluzione ,

Aggiungere il html anche 100%

html,body { 

    height: 100%; 
    width: 100%; 

} 

Answer 3

Prova utilizzando viewport Altezza

div { 
    height:100vh; 
} 

Si è già discusso in dettaglio here

Answer 4

Se si desidera in base all'altezza dello schermo, e non l'altezza della finestra:

const height = 0.7 * screen.height 

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

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