CODEWITHSUNDEEP
htmlcss
chris edwards
chris edwards

Reputation: 43

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

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

Upvotes: 0

Views: 74

Answers (2)

Benny Lin
Benny Lin

Reputation: 536

You need this piece:

html,body {height:100%;}

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

Upvotes: 1

Dolan Ellis
Dolan Ellis

Reputation: 1

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."

Upvotes: 0

Related Questions