1

Is there a way to stretch middle div, make it fill the remaining space between the other two (header, footer) with limited heights. All three are placed within parent element which cover 100% of a viewport space. The conditions are all three divs have to be relative to it's content but with limits (max-height) (except the middle one), so no absolute positioning; they must have the same parent element. I did find though the similar solved problem, but there was used a table structure, which is not what I looking for, but have exactly the same behavior that I want to apply to my concept.

Here the codepen, but I didn't figure out how to solve it yet. And one more, I don't want to use JS.

UPDATE Also without using flexbox, calc(), tables;

Community
  • 1
  • 1
Sébastien
  • 893
  • 2
  • 9
  • 13
  • in your CSS is a lot of stuff... I don't understand 100% what you want to do if your parent div is 100vh then if you give the 1st one an height and the last one an height you just have to give the middle one 100% no? – CodeWeis Apr 25 '16 at 17:53
  • @DanyCode If I give 100% to the middle one, it will cover all the space to the bottom of the viewport, but also it will push the footer div off the screen. – Sébastien Apr 25 '16 at 17:57
  • and height: calc(100% - ...px); the ...px is height header+footer – CodeWeis Apr 25 '16 at 18:01
  • @DanyCode And it would only work for initial values. But what if it changes after the page was loaded. – Sébastien Apr 25 '16 at 18:03

1 Answers1

1

CSS Tables (not actual tables)

body {
  margin: 0;
}
.parent {
  height: 100vh;
  display: table;
  width: 100%;
}
header,
footer {
  max-height: 25vh;
  display: table-row;
  background: lightblue;
}
main {
  height: 100%;
  background: pink;
  display: table-row;
}
<div class="parent">
  <header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus quod, odit minus doloremque nesciunt voluptates veniam possimus voluptate sapiente provident, magnam sed, ipsam pariatur.</p>
  </header>
  <main>
    <p>content</p>
  </main>
  <footer>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sed eligendi quibusdam voluptatibus consequatur cum, velit illo. Aperiam similique laudantium praesentium veniam repellat consequuntur et!</p>
  </footer>
</div>

Support is good down to IE8 at least.

However, I can't recommend this solution but given the unusual restrictions placed on this by the OP, this is the only remaining CSS solution AFAIK.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161