'
I am quite new to CSS and HTML to be honest, i've used it before but i'm not too experienced with nesting elements and such, so no doubt i'm doing something wrong here.

i want my header and footer be 10% of the page in height, and the content to be 80%

i have set the width of these elements fine and it all works using percentages, but the height just is not playing ball.

here is my html:

```
<body id="<%= params[:controller].parameterize %>_controller">

<div class="header">

</div>

<div class="content">
    <p>lol</p>
</div>

<div class="footer">

</div>

</body>

```

Its very basic for the purpose of debugging the problem at hand.

The CSS:

```
body {
  /*light gray */
  background-color: #CCCCFF;
  height: 100%;
  width: 100%;
  margin: 0;

}

h1 {
  padding-top: 1em;
  text-align: center;
}

h3 {
  padding-top: 1em;
  text-align: center;
}

/* Application layout classes */
.header {
  height: 5em;
  background-color: #115859;
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

.footer {
  height: 5em;
  background-color: #115859;
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

.content {

  height: 50em;
  background-color: #000000;
  width: 95%;
  margin-left: auto;
  margin-right: auto;

```

}

Now the above shows the sizes of each element as expected 5em for header/footer and 50em for the content. I now want these as percentages:

```
body {
  /*light gray */
  background-color: #CCCCFF;
  height: 100%;
  width: 100%;
  margin: 0;

}

h1 {
  padding-top: 1em;
  text-align: center;
}

h3 {
  padding-top: 1em;
  text-align: center;
}

/* Application layout classes */
.header {
  height: 10%;
  background-color: #115859;
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

.footer {
  height: 10%;
  background-color: #115859;
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

.content {

  height: 80%;
  background-color: #000000;
  width: 95%;
  margin-left: auto;
  margin-right: auto;

}

```

The header and footer are now longer visable and the content is literally a black rectangle roughly 1 row high.

Can anybody see what i am doing wrong?

JSFiffle link: <http://jsfiddle.net/4gyh6zcc/4/>