How to split space between header and footer in Ryan fait stick footer

Question

I am using Ryan fait sticky footer. it works well. but I need to split the space between header and footer like below

Fiddle here Fiddle

I have divs like

<div class='content'>
      <div class='firstdiv'>
      </div>
      <div class='seconddiv'>
      </div>
  </div>

I want to display like red and pink boxes. The problem is I don't have height for content if have enough content (more than a screen) in first div or second div it needs to equally grow like display:flex but it doesnot have enough content fullpage needs to be cover. how can I achieve this.

Answer 1

Try this but the height will depend on the content. You can set the height manually but you also have to write styling for media queries.

 * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ height: 100%; margin: 0 auto -55px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 55px; /* .push must be the same height as .footer */ } .content{ display: inline-flex; justify-content: space-around; width: 100%; height:100%; //background-color:red; } .firstdiv{ width: 25%; border: 2px solid red; height: 100px; } .seconddiv { width: 75%; border: 2px solid green; height: 100px; } 

 <div class="wrapper"> <div class="header"> <h1>CSS Sticky Footer</h1> </div> <div class='content'> <div class='firstdiv'> </div> <div class='seconddiv'> </div> </div> </div> <div class="footer"> <p>This <strong>CSS Sticky Footer</strong> simply stays put.</p> <p class="copyright">Copyright &copy; 2016 Ryan Fait &mdash; <a href="http://ryanfait.com/" title="Las Vegas Web Design">Las Vegas Web Design</a></p> </div>