问题
my template is as follows:
.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.
回答1:
As indicated by Motoxer4533, use the min-height property: http://jsfiddle.net/uef7v/
回答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.
来源：https://stackoverflow.com/questions/8463787/auto-stretch-div-when-its-default-height-width-is-filled