Create fixed div height

Question

I have created a div with height and width in '%' and also i want to make it responsive.

<div id="imgContainer" style="background-color: #FFD993;
            color: darkbrown;
            border: 1px outset #A61C14;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px; width:100%;text-align: center; height :40%">

Here is my JSFiddle .

When i am putting any objects using javascript it somehow adjusts its height. Here is what i have done JSFiddle

How can i fix the height of the div

Answer 1

Use the position absolute :

#imgContainer { width:100%;text-align: center; height :40% ; position: absolute;}

DEMO

Answer 2

You have to give a height of parent div , unless a height with percentage is not working, so you have to maintain a parent's height . check this http://jsfiddle.net/ffGq2/2/

Answer 3

Add position:absolute; css property fixed

Answer 4

if you want to use percentages in height you have to use position:absolute to the <div>

If you don't want to use position absolute then rather use fixed height only.

For making it responsive you only need to adjust the width not height, so I suggest use min-height:40%; position:absolute min-height:40%; position:absolute