Muthu Raj Muthu Raj - 4 months ago 27
CSS Question

How to make a div element responsive design

I am having container div element, which height is 100%. The buttonGroup div element is populated in jsp, it can contain multiple buttons, so it's height will grow dynamically.

after buttonGroup div element occupied certain height, remaining height should be assigned to displayArea div element. How to do this in css3 ? The design should be responsive.

<div id="container" style="height: 100%;">
<div id="buttonGroup">
<input id="testbtn" type="button" value="Test">
</div>
<div id="dislayArea">
------ data ------
</div>
</div>

Answer

You can use display:table property for this. Write like this:

#container{
    display:table;
    width:100%;
    height:100%;
    border:1px solid red;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
#buttonGroup{
    background:red;
    display:table-row;
    height:20%;
}
#dislayArea{
    background:green;
    display:table-row;
}

Check this http://jsfiddle.net/DV2F5/