填充默认高度/宽度时自动拉伸div

Question

我的模板如下：

.layout{

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

}

.header{

height:20%;
width: 100%;

}

.content{

height:60%;
width: 100%;

}

.footer{

height:20%;
width: 100%;

}

内容的默认高度为60％，如果内容 已填充，则需要数据必要时获取自动拉伸（高度/宽度），整页显示滚动条，该怎么做？

我尝试了提供父级 postion:relative;的解决方案，但是如果内容包含小数据，我将忽略默认高度并最小化内容，并且我希望保持默认高度如果是小数据。

Answer 1

如Motoxer4533所示，使用min-height属性：http://jsfiddle.net/uef7v/

Answer 2

只需将.content高度设置为min-height属性：

.content{
   min-height:60%;
}

将.content的最小高度设置为60％，如果内容数据占用的比例超过60％，将自动拉伸。 但你需要放弃位置：固定在布局上。如果您的内容是动态的，则不需要它。