2

I have the same question with a slight change

Make div (height) occupy parent remaining height

Here is a fiddle. http://jsfiddle.net/zf0fvgk0/

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="middle">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

How do I make the middle one occupy all the empty height in the div left by up and down?

note: my container, up and down's height can change, so I dont want to hardcode a pixel value

Community
  • 1
  • 1

2 Answers2

2

Using a flexbox layout, you could change the display of the container element to flex.

Then add flex-direction: column to the container element so that the children elements flow vertically. In order for the #middle element to take up the remaining space, you could increase the flew-grow value to something like 1.

Example Here

#container {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}
#middle {
    flex-grow: 1;
}

Support for flexboxes can be found here.

Add relevant vendor prefixes for additional browser support.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • There is quite poor support of `display: flex`. – pavel Feb 19 '15 at 13:02
  • @panther It depends on your definition of *poor support*, it's actually not *that* bad - http://caniuse.com/#feat=flexbox This is a valid option, and in my opinion it's better than using CSS tables. Regardless, I think future users will find this helpful--especially when support improves. Support is already at `88.88%`, which is pretty good. – Josh Crozier Feb 19 '15 at 13:04
  • If we have eg. e-shop, each 9th customer can't make an order in our shop. I think the support isn't so good. Not when there is an option how to make other way with almost 100% support. – pavel Feb 19 '15 at 13:05
  • @panther [Graceful degradation versus progressive enhancement](http://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement) - in theory, the site *should* still function when it isn't supported. The appearance shouldn't necessarily effect the direct functionality. – Josh Crozier Feb 19 '15 at 13:06
  • 1
    @panther.. even if there is a lesser support than tables, looking at the browser support, this would be the best answer for future readers – Naeem Shaikh Feb 19 '15 at 13:06
1

use table displays values and set full height to the middle one div.

#container {display: table;}
#container > * {display: table-row}
#middle {height: 100%;}

http://jsfiddle.net/zf0fvgk0/1/

pavel
  • 26,538
  • 10
  • 45
  • 61