15

Please visit this fiddle to see what I mean -

I have a parent DIV, within that there are two DIVs placed in vertical order. The top DIV should have only the height of its content, whereas the bottom DIV should occupy all remain space of the parent DIV irrespective to content heights, and also shouldn't overlap the parent DIV.

HTML:

<div class="outer">
    <div  class="inner-title">
        THIS IS MY TITLE
    </div>
    <div class="inner-content">
        CONTENT AREA
    </div>
</div>

CSS:

html,body
{
height: 100%;
}

.outer
{
    background-color:blue;
    height: 80%;
}

.inner-title
{
    background-color:red;
}

.inner-content
{
background-color:yellow;
    height: auto;
}

In short, "inner-content" should occupy all remaining space of "outer" DIV, without overlapping.

Any idea of how to achieve this?

Any help on this much appreciated.

Nirman
  • 6,715
  • 19
  • 72
  • 139

2 Answers2

17

Add display:table; to parent div and display:table-row; to child divs

And height:0 to first child div. This takes auto height

    html,body{
    height: 100%;
}
.outer{
    background-color:blue;
    height: 80%; border:red solid 2px;
    display: table;
     width:100%
}
.inner-title{
    background-color:red;
    display:table-row; 
     width:100%
}
.inner-content{
    background-color:grey;
    display:table-row;
    width:100%;
    height:100%
}

DEMO UPDATED

Sowmya
  • 26,684
  • 21
  • 96
  • 136
  • @sowmya.. What about setting a min-height for the 2nd div?? – Guruprasad J Rao Jul 11 '13 at 10:33
  • Y do u need min-height. Op is expecting that div to occupy the entire space available – Sowmya Jul 11 '13 at 10:35
  • @Sowmya.. No.. No.. I jus had a doubt and so asked.. setting min-height to the remaining portion.. is it possible?? – Guruprasad J Rao Jul 11 '13 at 10:39
  • 1
    That is not really good in his question coz first div height is not fixed so – Sowmya Jul 11 '13 at 10:54
  • @Sowmya.. Well that was useful.. :) Thank you.. :) – Guruprasad J Rao Jul 11 '13 at 10:58
  • this looks a nice trick.. but one thing is that the height of first DIV should only be of its content size, where the second DIV should occupy rest of the space in parent DIV. Here it seems the first DIV is also taking much more space (height) than its contents – Nirman Jul 11 '13 at 11:05
  • 1
    @Nirman that is coz I have added more content in first div to show sample. Check the updated answer now – Sowmya Jul 11 '13 at 11:07
  • thanks Sowmya... just checked this looks good in IE10, and Chrome.. but in Firefox it is showing two rows in equal height.. – Nirman Jul 11 '13 at 11:11
  • i suppose, the "display:table" and "display:table-row" are rendered differently in Chrome and Firefox! – Nirman Jul 11 '13 at 11:12
  • thanks sowmya this worked for me.. your prompt responses have helped me a lot to work out this in reasonable time. – Nirman Jul 11 '13 at 12:46
  • 1
    @Sowmya: Is there now a better flexbox-based solution? Or is display:table still the only way to do this? – D.R. Oct 12 '16 at 20:54
  • @CarlosGaleano glad it helped – Sowmya Jun 30 '17 at 12:40
11

A newer CSS way would be using flexbox

/*QuickReset*/ *{box-sizing:border-box;margin:0;} html,body{height:100%;}

.flex-col {
  display: flex;
  flex-direction: column; /* or:   flex-flow: column wrap; */
  height: 100%;
}

.flex-fill { /* Add this class to the element you want to expand */
  flex: 1;  
}
<div class="flex-col">
    <div style="background:red;"> HEADER </div>
    <div class="flex-fill" style="background:yellow;"> CONTENT </div>
    <div style="background:red;"> FOOTER</div>
</div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313