Top and bottom fixed height with fluid height middle

Question

What I am going to ask is something that I did using javascript but I do want to achieve it with css only (if possible )

Here is the scenario:

I have a DIV element which height is h px. This very DIV element has 3 childs which are DIV elements too. Their purpose is the following:

First DIV element is k px height and is attached to the top of the parent container. Its height is constant.

Second DIV element is n px height and is attached to the bottom of the parent container. Its height is constant.

Third DIV element is h - (n+k) px.

What I want is when I resize the parent div ( which is a floating box ) to automatically keep the third DIV element h - (n+k) px.

Is this possible to be achieved with css only ?

Answer 1

Yes use calc() function:

for your 3rd div set height CSS property as:

height: calc(h - n - k);

Answer 2

If you plan on supporting browsers that don't support calc() here is an approach without it.

The point is to use absolute positioning, padding (the same height as the attached top and bottom elements) and box-sizing:border-box; :

DEMO

 html,body,.wrap { height: 100%; margin: 0; padding: 0; } div { box-sizing: border-box; } .wrap { position: relative; width: 50%; padding: 50px 0 80px; border: 5px solid tomato; } .one,.two { position: absolute; left: 0; width: 100%; border: 5px solid teal; } .one { height: 50px; top: 0; } .two { height: 80px; bottom: 0; } .three { height: 100%; background: gold; } 

 <div class="wrap"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> 

---

Edit :

Here is a bonus without the box-sizing property and only absolute positioning :

DEMO

 html, body, .wrap { height: 100%; margin: 0; padding: 0; } .wrap { position: relative; width: 50%; } .one, .two, .three { position: absolute; left: 0; width: 100%; background: teal; } .one { height: 50px; top: 0; } .two { height: 80px; bottom: 0; } .three { top: 50px; bottom: 80px; background: gold; } 

 <div class="wrap"> <div class="one">... content 1 ...</div> <div class="two">... content 2 ...</div> <div class="three">...content 3 ...</div> </div> 

Answer 3

An alternative to calc() is to use flexboxes . These don't couple the heights together so if you ever change the heights of the header and footer, you don't need to update the CSS for your other element.

Here is a basic example:

 $('button').on('click', function() { $('.container').height(function(i, v) { return v < 200 ? 250 : 150 }); }) 

 .container { float:left; height:150px; width:300px; background-color:#000; /* set as a flex container laid out in a column (top to bottom) */ display:flex; flex-direction:column; } /* content div, flex auto fills the remaining height */ .container div { background-color:#0f0; flex:1 1 auto; } /* top red div, fixed at 50px */ .container div:first-child { flex:0 0 50px; background-color:#f00; } /* bottom blue div, fixed at 50px */ .container div:last-child { flex:0 0 50px; background-color:#00f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="container"> <div>Header</div> <div>Content</div> <div>Footer</div> </div> <div><button>Resize Container</button></div> 

Answer 4

You may use calc to achieve this. For example:

div {
 height: calc(h - n - k);
}

For further reading, check out this great tutorial on calc() : http://webdesign.tutsplus.com/tutorials/calc-grids-are-the-best-grids--cms-22902

Answer 5

Here is demo jsFiddle

HTML:

<div id="main">
    <div id="a"></div>
    <div id="b">Hello</div>
    <div id="c"></div>
</div>

CSS:

#main{height: 100%;background:red;}
#a{height: 100px;background:blue;}
#c{height: 50px;background:green;}
#b{height: calc(100% - 150px});

Answer 6

You can use calc() . Here is a working demo

Remember to wrap use parenthesis in the correct place (eg calc(200px - (50px + 50px)) )

#parent {
    width: 100px;
    height: 200px;
}

#div1 {
    height: 50px;
    background: red;
}

#div2 {
    height: 50px;
    background: blue;
}

#div3 {
    height: calc(200px - (50px + 50px));
    background: green;
}

Also be sure to check browser support