How can I make content blocks that fill 50% of the viewport?

Question

I have a design which uses content blocks that are each 50% of the viewport. As you scroll down, more 50% high blocks appear.

I am having difficulty implementing this while keeping the design responsive to other elements. I had a method of designing it, however a footer is incompatible with that method.

This is my previous design: JSFiddle. As you can see, the <main> is resized to 100% of the viewport, the rest of the content becoming overflow. However, this fails when a footer is added, since it is placed directly after the viewport and obstructs the content.

HTML:

<main>
  <section>
    <p>
      Integer accumsan magna vitae velit lobortis blandit. Integer et ante augue. Ut ut vehicula ante. Donec eget finibus nibh. Aliquam sit amet ligula non ipsum facilisis efficitur. Mauris laoreet non diam sit amet imperdiet. Pellentesque eu risus luctus,
      accumsan dolor tempor, pellentesque massa. Pellentesque scelerisque fringilla tellus, nec commodo lorem commodo non.
    </p>
  </section>
  <section>
    <p>
      Integer accumsan magna vitae velit lobortis blandit. Integer et ante augue. Ut ut vehicula ante. Donec eget finibus nibh. Aliquam sit amet ligula non ipsum facilisis efficitur. Mauris laoreet non diam sit amet imperdiet. Pellentesque eu risus luctus,
      accumsan dolor tempor, pellentesque massa. Pellentesque scelerisque fringilla tellus, nec commodo lorem commodo non.
    </p>
  </section>
  <section>
    <p>
      Integer accumsan magna vitae velit lobortis blandit. Integer et ante augue. Ut ut vehicula ante. Donec eget finibus nibh. Aliquam sit amet ligula non ipsum facilisis efficitur. Mauris laoreet non diam sit amet imperdiet. Pellentesque eu risus luctus,
      accumsan dolor tempor, pellentesque massa. Pellentesque scelerisque fringilla tellus, nec commodo lorem commodo non.
    </p>
  </section>
  <section>
    <p>
      Integer accumsan magna vitae velit lobortis blandit. Integer et ante augue. Ut ut vehicula ante. Donec eget finibus nibh. Aliquam sit amet ligula non ipsum facilisis efficitur. Mauris laoreet non diam sit amet imperdiet. Pellentesque eu risus luctus,
      accumsan dolor tempor, pellentesque massa. Pellentesque scelerisque fringilla tellus, nec commodo lorem commodo non.
    </p>
  </section>
</main>
<footer>
</footer>

CSS:

* {
  margin: 0;
  padding: 0
}

body,
html {
  height: 100%
}

main {
  height:100%
}

section:nth-child(even) {
  background: red
}

section:nth-child(odd) {
  background: green
}

section {
  height: 50%;
}
footer{
  background:rgba(0,0,0,0.5);
  position:relative;
  height:50%;
}

How can I either:

• Modify my previous design to accomodate a footer

or

• Change my design so that <main> does not use overflow, and stretches to accommodate the <section> elements, retaining their 50% of the viewport. (This is probably the more likely option, but I can't figure out how to do this).

Appreciate any help! I'm stuck. I'm willing to use Javascript or Jquery, but I'd prefer to keep it to HTML and CSS (except maybe for browser fallbacks).

Update: VH units seem to work well, but are not supported in IE8 or earlier. Anyone have input on how to design a fallback?

Answer 1

element{
height:50vh;
}

There is also a flexbox solution for this. I am not so sure setting height like that to .main is ideal. use 100vh on both instead.