Set the height relative to the parent parent, but stretch the parent

Question

This HTML structure has div#pagein which the contents of the current page will be loaded via Ajax. Content always consists of tags sectionthat can have a dynamic height (in percent relative to the browser) or static height (in pixels).

The height div#pageshould be adjusted, so it footerwill follow immediately after the last div#page > section.

To be able to set a percentage value for tags div#page > section, however, I gave a div#pageheight of 100%. Therefore, the height of the DOM is not stretched.

If the tag footerwas inside div#page, it would work. This is not a good solution for me, because the footer will be overwritten dynamically with the loaded page content.

Is there any magic CSS solution to stretch div#pagecorrectly?

body, html { margin: 0; padding: 0; }
#outer { background: red; position: absolute; width: 100%; height: 100%; }
#page { height: 100%; }

#page > section { background: #666; width: 100%; }
#page > section:nth-of-type(2n) { background: #333; }
#page > section:nth-of-type(1) { height: 100%; }
#page > section:nth-of-type(2) { height: 160px; }
#page > section:nth-of-type(3) { height: 220px; }
#page > section:nth-of-type(4) { height: 120px; }

footer { background: green; height: 160px; }

<div id="outer">

    <!-- The current page content will be loaded into this div. -->
    <div id="page">
      <section>Full height.</section>
      <section>Static height 1.</section>
      <section>Static height 2.</section>
      <section>Static height 3.</section>
    </div>

    <!-- The footer is static and therefore not inside of the #page div. -->
    <footer>
      Immediately after static height 3.
    </footer>
  </div>

Run codeHide result

Answer 1

If you drop the height for the div #pageand set the first sectionto 100vh, I think that it will work the way you want, but only with newer browsers that support the "viewport" block vh.

Browser Support: http://caniuse.com/#feat=viewport-units

  body, html { margin: 0; padding: 0; }
  #outer { background: red; position: absolute; width: 100%; height: 100%; }
  #page { }

  #page > section { background: #666; width: 100%; }
  #page > section:nth-of-type(2n) { background: #333; }
  #page > section:nth-of-type(1) { height: 100vh; }
  #page > section:nth-of-type(2) { height: 160px; }
  #page > section:nth-of-type(3) { height: 220px; }
  #page > section:nth-of-type(4) { height: 120px; }

  footer { background: green; height: 160px; }

<div id="outer">

    <!-- The current page content will be loaded into this div. -->
    <div id="page">
      <section>Full height.</section>
      <section>Static height 1.</section>
      <section>Static height 2.</section>
      <section>Static height 3.</section>
    </div>

    <!-- The footer is static and therefore not inside of the #page div. -->
    <footer>
      Immediately after static height 3.
    </footer>
  </div>

Run codeHide result

Answer 2

, , div

body, html { margin: 0; padding: 0; }
  #outer { background: red; position: relative; width: 100%; height: auto; }
  #page { height: 100%; }

  #page > section { background: #666; width: 100%; }
  #page > section:nth-of-type(2n) { background: #333; }
  #page > section:nth-of-type(1) { height: 100%;background: red; }
  #page > section:nth-of-type(2) { height: 160px;background: yellow; }
  #page > section:nth-of-type(3) { height: 220px;background: aqua; }
  #page > section:nth-of-type(4) { height: 120px;background: darkblue; }

  footer { background: green; height: 160px; }

Hide result

-, , , , .

-,