4

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

The height of div#page should adjust, so that the footer will follow immediately after the last div#page > section.

To be able to set a value in percent for the div#page > section tags however, I gave div#page a height of 100%. Therefore, it's DOM height won't stretch.

If the footer tag was inside div#page, it would work. This is not a good solution for me, because the footer would be overwritten by the dynamicaly loaded page content.

Is there some magic CSS solution to stretch the div#page properly?

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>
Christoph Bühler
  • 2,795
  • 2
  • 28
  • 43
  • @maioman You can't really use relative height with a min-height parent. See this answer: http://stackoverflow.com/questions/17969022/css-height-working-but-min-height-doesnt-work – Christoph Bühler Oct 08 '15 at 09:25

2 Answers2

2

If you drop the height for the #page div and set the first section to 100vh I guess it will work as you want, though with newer browsers only, that support the "viewport" unit 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>
Asons
  • 84,923
  • 12
  • 110
  • 165
0

hi i tried to resolve this way by changing the position of the outer 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; }

i have included the working demo code so that you can check out put is it as you expect or not ..

Demo Code you can check out

Himesh Aadeshara
  • 2,114
  • 16
  • 26