Responsive height of div issue

Question

One example is better than a thousand words, so here you go:

https://jsfiddle.net/jesuxapo/os53cyc1/

As you can see, the height is responsive, but not completely. The problem is the <div id="k"> with fixed height of 150px . Try to play with it and I think you'll understand exactly what I mean. I want to get rid of this 'problem' somehow.

I could use the calc() of the css3 , however it's not cross-browser(especially android and IE8-9).

Perhaps there's some other solution for this using html and css languages?

Answer 1

You may use the display:table properties (IE8 and later): https://jsfiddle.net/os53cyc1/1/

it will grow if content is more than 100vh all together

 html, body { padding: 0; margin: 0; height: 100%; background: #333; font-weight: bold; color: #fff; } body { display:table; width:100%; } body>div { display:table-row; } div { border: solid 2px #FFFF00; } div#a { position: relative; background: #800000; width: 100%; height: 100%; } div#b { position: absolute; top: 0; } div#c { position: absolute; bottom: 0; } div#k { height: 150px; background: #008000; } 

 <div id="k"> Hello, I'm K and I just broke your code </div> <div id="a"><br><br><br><br> This is relative div with height of 100% and max-height of 500px <div id="b"> This div is aligned to the top of the Red div </div> <div id="c"> This div aligned to bottom of the Red div </div> </div>