Height set to 100% doesnt work

Question

On the site i am making, one-paged site, the first div should always has the height of 100%, however this isnt working, the div does not cover all the height size of the screen.

At the moment, the div (header) has the weight set to 650px and its fine on 1336x768 resolution, but not different resolutions. When i set height:100%; it doesnt happen, does not make div have all the height of the screen on different resolutions.

I think its a css error, but cant figure it out yet.

I hope you 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 a {
  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 a {
  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 a {
  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 a {
  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 a {
  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 your team organized, connected, and 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 for free</a>
        </form>
      </div>
    </div>

    <div class="mail2">
      <form>
        <h1>Try Now!</h1>
        <input type="text" placeholder="Your Email here...">
        <a href="#">Get started for 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 a 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 Us !</h1>
          <p>Rua Andrade Corvo, 242</p>
          <p>sala 206</p>
          <p>4700-204 Braga</p>
          <p>Portugal</p>
        </div>
        <div>
          <h1>Call Us !</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>

Answer 1

Add height:100% to html,body and .header.

Remove min-height:650 from .header.

html {
   height:100%; /*added*/
}

body {
  margin: 0;
  font-family: 'Open Sans', Helvetica, sans-serif;
  min-width: 900px;
  height:100%; /*added*/
}

.header {
  background-image: url("img/fundo1.jpg");
  background-color: rgb(21, 21, 21);
  color: white;
  height:100%;
  position: relative;
}

.header .logo {
  width: 230px;
  height: 60px;
  margin: 20px 8px 8px 6%;
}

.header .menu {
  position: absolute;
  top: 55px; right: 25px;
}

.header .menu a {
  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 a {
  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 a {
  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 a {
  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 a {
  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 your team organized, connected, and 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 for free</a>
        </form>
      </div>
    </div>

    <div class="mail2">
      <form>
        <h1>Try Now!</h1>
        <input type="text" placeholder="Your Email here...">
        <a href="#">Get started for 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 a 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 Us !</h1>
          <p>Rua Andrade Corvo, 242</p>
          <p>sala 206</p>
          <p>4700-204 Braga</p>
          <p>Portugal</p>
        </div>
        <div>
          <h1>Call Us !</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>

Answer 2

it wont be set to 100%, 100% of height will only work for the amount of content it has, you will have to set the height by javascript..if your content takes a height of 300px then 100% will taken as 100% of 300px,and no the browser height

got a solution using css

    html
    {
height:100%;
}

.header:
{
height:100%;
}

this will do your job.

Answer 3

Try to add the following css to your code:

html,
body { height: 100%; }

.header {
    (...)
    height: 100%;
}

See a demo here: CodePen