1

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

Scope
  • 85
  • 2
  • 12

2 Answers2

2

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

Community
  • 1
  • 1
justinw
  • 3,856
  • 5
  • 26
  • 41
  • Hi @Scope if this or any answer has solved your question please consider [accepting it](http://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – justinw Nov 10 '15 at 16:11
1

You should set the html, body {height: 100%;} then the .container to 100% and then the section's positioning to absolute to achieve that as the height in percentage is calculated relatively to its parent/container.

You could set your section to height: 100vh; to achieve that. Just be careful with paddings and margins, as the section could grow bigger than the viewport. :)

Made a jsbin. *without skeleton

  • I don't think it has anything to do with 'skeleton'.

This is the best video to understand css units.

juanmnl
  • 412
  • 3
  • 9