html - Height set to 100% doesnt work -

on site making, one-paged site, first div should has height of 100%, isnt working, div not cover height size of screen.

at moment, div (header) has weight set 650px , fine on 1336x768 resolution, not different resolutions. when set height:100%; doesnt happen, not make div have height of screen on different resolutions.

i think css error, cant figure out yet.

i hope can understand.

body {    margin: 0;    font-family: 'open sans', helvetica, sans-serif;    min-width: 900px;  }    .header {    background-image: url("img/fundo1.jpg");    background-color: rgb(21, 21, 21);    color: white;    height: auto;    min-height: 650px;    position: relative;  }    .header .logo {    width: 230px;    height: 60px;    margin: 20px 8px 8px 6%;  }    .header .menu {    position: absolute;    top: 55px; right: 25px;  }    .header .menu {    margin: 0 4px;    font-size: 15px;    color: white;    text-decoration: none;    padding: 6px 20px;  }    .header .menu a:hover,  .header .menu a.current {    color: rgb(204, 66, 63);  }    .header .move {    color: white;    width: 40%;    margin: 0;    padding: 10px;  }    .header .move .center {    margin: 260px auto 0;    width: 360px;  }    .header .move h1 {    font-weight: 400;    font-size: 38px;    margin: 6px 0;  }    .header .move p {    font-weight: 300;    font-size: 20px;    border-top: 2px solid white;    margin: 6px 0;    padding-top: 6px;  }    .header .mail1 {    background-image: url("img/email.png");    background-size: contain;    background-position: 100% 100%;    background-repeat: no-repeat;    width: 560px; height: 560px;    position: absolute;    bottom: 0; right: 0;  }    .header .mail1 form {    position: absolute;    width: 240px;    bottom: 220px; right: 155px;  }    .header .mail1 h1 {    font-weight: 300;    text-align: center;    color: rgb(203, 41, 37);    }  .header .mail1 input {    box-sizing: border-box;    width: 100%;    font-family: 'open sans', helvetica, sans-serif;    padding: 8px;    border: 1px solid rgb(219, 219, 218);    border-radius: 6px;    margin-bottom: 12px;   }    .header .mail1 input:hover {    border: 1px solid rgb(189, 189, 188);  }    .header .mail1 input:focus {    outline: 0;  }    .header .mail1 {    display: block;    color: white;    text-decoration: none;    background-color: rgb(204, 66, 63);    border-radius: 6px;    text-align: center;    padding: 8px;    font-size: 14px;  }    .header .mail1 a:hover {    background-color: rgb(224, 86, 83);  }    .mail2 {    background-color: white;    background-image: url("img/barra.png");    background-position: 12% 0%;    height: 110px;    text-align: right;  }    .mail2.fixed {    position: fixed;    display:block;    top: 0; left: 0;    width: 100%;    min-width: 800px;    height: 110px;    z-index: 1;  }    .mail2 form {    display: inline-block;    margin: 36px 0;    padding: 0 10px;    width: 600px;  }    .mail2 h1 {    font-weight: 300;    color: rgb(203, 41, 37);    display: inline;    vertical-align: middle;    font-size: 28px;  }    .mail2 input {    box-sizing: border-box;    width: 220px;    font-family: 'open sans', helvetica, sans-serif;    padding: 8px;    border: 1px solid rgb(219, 219, 218);    border-radius: 6px;    margin: 0 6px;  }    .mail2 input:hover {    border: 1px solid rgb(189, 189, 188);  }    .mail2 input:focus {    outline: 0;  }    .mail2 {    display: inline;    color: white;    text-decoration: none;    background-color: rgb(204, 66, 63);    border-radius: 6px;    text-align: center;    padding: 8px 4%;    font-size: 14px;  }    .mail2 a:hover {    background-color: rgb(224, 86, 83);  }    .mail2 .top {    padding: 8px 6px;    background-color: rgb(51, 51, 51);  }    .mail2 .top:hover {    background-color: rgb(71, 71, 71);  }    .optimize {    background-image: url("img/fundo2.jpg");    background-size: cover;    background-color: rgb(21, 21, 21);    color: white;    padding-bottom: 48.1%;  }  .optimize.fixed {    margin-top: 110px;  }    .barra2 {    background-image: url('img/barra2.png');    background-size: cover;    padding-bottom: 21.6%;  }    .mobile {    background-image: url("img/fundo3.jpg");    background-size: cover;    background-color: rgb(171, 171, 171);    color: white;    padding-bottom: 44.4%;    position: relative;  }    .mobile .invisi {    position: absolute;    width: 13%;    height: 10%;    bottom: 14%;    border-radius: 8px;  }  .mobile .invisi:hover {    background: white;    opacity: 0.2;  }    .mobile .appstore {    right: 26.5%;  }    .mobile .googleplay {    right: 11.5%;  }    .contact {    background-image: url("img/fundo2es.jpg");    background-size: cover;    background-color: rgb(21, 21, 21);    background-repeat: no-repeat;    height:100%;    color:white;  }    .contact .textocon {    text-align: right;    padding: 55px 75px 0 0;  }    .contact .textocon div {    display: inline-block;    width: 290px  }    .contact .textocon h1 {    font-weight: 400;    font-size: 42px;    margin: 6px 0;  }    .contact .textocon p {    font-weight: 300;    font-size: 19px;    border-top: 2px solid white;    margin: 6px 0;    padding-top: 6px;  }    .contact .col1 {    display: inline-block;    vertical-align: top;    width: 410px;    padding: 10px 6px 10px 60px;  }    .contact .col1 h1 {    font-weight: 300;    font-size: 25px;    margin: 4px 0;  }    .contact .col1 input {    width: 380px;    height: 20px;  }    .contact .col1 input,  .contact .col2 textarea {    font-family: 'open sans', helvetica, sans-serif;    padding: 14px;    font-size: 13px;    color: white;    background-color: transparent;    border: 1px solid rgb(172, 161, 160);    margin: 6px 0;  }  .contact .col1 input:focus,  .contact .col2 textarea:focus {    outline: 0;    border: 1px solid white;  }    .contact .col2 {    display: inline-block;    width: calc(100% - 560px);    padding: 52px 10px 10px 0;    text-align: right;  }    .contact .col2 textarea {    text-align: left;    width: 100%;    box-sizing: border-box;    height: 112px;  }    .contact .col2 {    display: inline-block;    color: white;    font-weight: bold;    text-decoration: none;    background-color: rgb(204, 66, 63);    border-radius: 6px;    padding: 12px 60px;    font-size: 20px;  }  .contact .col2 a:hover {    background-color: rgb(224, 86, 83);  }    .contact .info {    padding: 10px 60px;    display: flex;    justify-content: space-between;  }    .contact .info h1 {    font-weight: 300;    font-size: 25px;  }    .contact .info p {    font-size: 12px;    line-height: 12px;  }    .contact .info {    text-decoration: none;    color: white;  }  .contact .info a:hover {    color: #ddd;  }    .contact .info img {    width: 32px;    margin: 6px;  }  .contact .info img:hover {    opacity: 0.8;  }

<!doctype html>  <html>    <head>      <script src="js/jquery-2.1.1.min.js"></script>      <script src="js/prefixfree.min.js"></script>      <script src="js/fixedbar.js"></script>      <meta charset="utf-8">      <link href="http://fonts.googleapis.com/css?family=open+sans:400,300" rel="stylesheet" type="text/css">      <link href="styles.css" rel="stylesheet" type="text/css">      <title> layout </title>    </head>    <body>          <div class="header" id="top">        <img class="logo" src="img/logo.png">        <div class="menu">          <a href="#" class="current">home</a>          <a href="#tour">product tour</a>          <a href="#">pricing</a>          <a href="#">try</a>          <a href="#vision">vision</a>        </div>        <div class="move">          <div class="center">            <h1>move work forward!</h1>            <p>optential keeps team organized, connected, , focused on results.</p>          </div>        </div>        <div class="mail1">          <form>            <h1>try now!</h1>            <input type="text" placeholder="your email here...">            <a href="#">get started free</a>          </form>        </div>      </div>        <div class="mail2">        <form>          <h1>try now!</h1>          <input type="text" placeholder="your email here...">          <a href="#">get started free</a>          <a class="top" href="#top">top</a>        </form>      </div>          <div class="optimize"></div>        <div class="barra2"></div>        <div class="mobile">        <a href="#" class="invisi appstore"></a>        <a href="#" class="invisi googleplay"></a>      </div>        <div class="contact">        <div class="textocon">          <div>            <h1>optential</h1>            <p>a new management system<br>for new management paradigm!</p>          </div>        </div>        <form>          <div class="col1">            <h1>contact us!</h1>            <input type="text" name="nome" size="50" placeholder="name"/>            <input type="text" name="email" size="50" placeholder="email"/>            <input type="text" name="subjet" size="50" placeholder="subject"/>          </div>          <div class="col2">            <textarea name="message" rows="5" cols="70" placeholder="message..."></textarea>            <a href="#">send</a>          </div>        </form>        <div class="info">          <div>            <h1>mail !</h1>            <p>rua andrade corvo, 242</p>            <p>sala 206</p>            <p>4700-204 braga</p>            <p>portugal</p>          </div>          <div>            <h1>call !</h1>            <a href="#"><p>+351 987654323</p></a>            <a href="#"><p>+351 987654323</p></a>            <a href="#"><p>+351 987654323</p></a>          </div>          <div>            <h1>email us! </h1>            <a href="#"><p>code@angel.com</p></a>            <a href="#"><p>code_hr@angel.com</p></a>            <a href="#"><p>code_support@angel.com</p></a>          </div>          <div>            <h1>join us! </h1>            <a href="#"><img src="img/facebook.png"></a>            <a href="#"><img src="img/gplus.png"></a>            <a href="#"><img src="img/twitter.png"></a>            <a href="#"><img src="img/instag.png"></a>          </div>        </div>      </div>      </body>  </html>

try add following css code:

html, body { height: 100%; }  .header {     (...)     height: 100%; } 

see demo here: codepen