Full height with skeleton boilerplate

Question

I am trying to make every section tag have a height of 100%, but it does not work.

Here is my html code:

  <div class="container">
    <div class="row">
      <div class="twelve columns">
        <section>
          <h4>Basic Page</h4>
          <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
        </section>

      </div>
    </div>
  </div>

CSS code:

section {
    height: 100%;
    background-color: #ccc;
}

skeleton.css and normalize.css is as downloaded

Answer 1

height: 100%; is relative to the parent's height. That means if you haven't set the parent elements' height, 100% of undefined, is undefined.

You will need to set an explicit height for .twelve element (and if that is a %, then for it's parents and so forth).

Also see these:

height: 100% not working

CSS height 100% percent not working