html - 填充默认高度/宽度时自动拉伸 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% 以上，它将自动拉伸。但是您需要删除位置：固定在布局上。如果您的内容是动态的，则不需要。