How to make div occupy remaining height?

Question

I have this problem, I have two divs:

<         


        
      

Answer 1

You can use this http://jsfiddle.net/Victornpb/S8g4E/783/

#container {
    display: table;
    width: 400px;
    height: 400px;
}
#container > div{
    display: table-row;
    height: 0;
}
#container > div.fill{
    height: auto;
}

Just apply the class .fill to any of the children to make then occupy the remaining height.

    

        Lorem ipsum
    
    

        Lorem ipsum
    
    
   
        Lorem ipsum
    

It works with how many children you want, no additional markup is required.