html - DIV height set as percentage of screen?

Question

I'm looking to set a parent DIV as 70% of the full 100% screen height. I've set the following CSS but it doesn't seem to do anything:

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

For some reason it doesn't seem to be working though and the header isn't 70% of the screen size. Any advice?

Answer 1

Try using Viewport Height

div {
    height:100vh; 
}

It is already discussed here in detail