CSS setting height as a % rather than em causes the div elements to dissapear

Question

' 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/

score 1 · Accepted Answer · answered Nov 18 '14 at 17:57

1

You need this piece:

html,body {height:100%;}

updated sample: http://jsfiddle.net/4gyh6zcc/9/

answered Nov 18 '14 at 17:57

Benny Lin

536
3
8

Thanks! I did not know you could add style to an html tag, i thought that was simply information about the content type. I don't program web applications often. thanks. – chris edwards Nov 18 '14 at 17:59
Would you mind accepting this as the answer if it works for you? – Benny Lin Nov 18 '14 at 18:02

score 0 · Answer 2 · edited May 23 '17 at 12:27

Take a look at this: Percentage Height HTML 5/CSS

"To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height."

CSS setting height as a % rather than em causes the div elements to dissapear

2 Answers2