Auto Stretch Div When It's Default Height/width Is Filled

my template is as follows: .layout{ height:100%; width: 70%; position: fixed; } .header{ height:20%; width: 100%; } .content{ height:60%; width: 100%; } .footer{ height:

Solution 1:

As indicated by Motoxer4533, use the min-height property: http://jsfiddle.net/uef7v/

Solution 2:

just set the .content height with min-height property:

.content{
   min-height:60%;
}

that will set the minimum height of .content to 60% and if the data of the content take up more that 60% it will stretch automatically. but you need to drop the position:fixed on layout. you don't need that if your content is dynamic.