填充默认高度/宽度时自动拉伸 div
我的模板如下：
.layout{
height:100%;
width: 70%;
position: fixed;
}
.header{
height:20%;
width: 100%;
}
.content{
height:60%;
width: 100%;
}
.footer{
height:20%;
width: 100%;
}
内容有一个默认高度60%，并且我希望如果内容用数据填充来在必要时获得（高度/宽度）的自动拉伸 ，整个页面出现滚动条，怎么办？
我尝试了提供 parent postion:relative; 的解决方案，但这将忽略默认高度并在内容数据较小的情况下最小化内容，我想如果数据较小，请保留默认高度。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如 Motoxer4533 所示，使用 min-height 属性： http://jsfiddle.net/uef7v/
As indicated by Motoxer4533, use the min-height property: http://jsfiddle.net/uef7v/
只需使用
min-height属性设置.content高度：这会将
.content的最小高度设置为 60%，并且如果内容占用超过 60% 时会自动拉伸。但您需要删除布局上的位置：固定。如果您的内容是动态的，则不需要它。
just set the
.contentheight withmin-heightproperty:that will set the minimum height of
.contentto 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.