Search code examples
htmlcssstretching

Auto stretch div when it's default height/width is filled

my template is as follows:

enter image description here

.layout{

height:100%;
width: 70%;
position: fixed;

}

.header{

height:20%;
width: 100%;

}

.content{

height:60%;
width: 100%;

}

.footer{

height:20%;
width: 100%;

}

the content has a default height 60%, and i want if the content is filled with data to get auto stretch for (height/width) when necessary, and a scroll appears for whole page, how to do so ?

i tried the solution for giving the parent postion:relative; but that will ignore the default height and minimize the content in case of the content has small data, and i want to keep default height in case of small data.

Solution

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