CODEWITHSUNDEEP
htmlcss
user494461
user494461

Reputation:

Make middle div use up all height and left after placing top and bottom elements in a div

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

Upvotes: 2

Views: 332

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241118

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.

Upvotes: 2

pavel
pavel

Reputation: 27072

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/

Upvotes: 1

Related Questions