首页 > 代码库 > 解决一个适应屏幕高度自伸缩的问题。（二）
解决一个适应屏幕高度自伸缩的问题。（二）
Cain同学提出要看CSS3弹性盒模型，非常感谢。
我找到了下面这个网页，是一个更好的解决办法，分享在下边。
http://www.w3chtml.com/css3/properties/flexible-box/box-orient.html
父级：height: 100%;display:-webkit-box;-webkit-box-orient:vertical;
子级：-webkit-box-flex:1;
子级：-webkit-box-flex:1;
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> html,body{ height: 100%; } body{ margin: 0; } .box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;width:600px;height:180px;margin:0;padding:0;list-style:none;} #box{ height: 100%;-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical; } .box li:nth-child(1){ height: 100px; background:#666; } .box li:nth-child(2){-webkit-box-flex:2;-moz-box-flex:2;-o-box-flex:2;-ms-box-flex:2;box-flex:2;background:#999; } .box li:nth-child(3){ height: 100px; background:#ccc; } </style></head><body><ul id="box" class="box"> <li>1</li> <li>2</li> <li>3</li></ul></body></html>
解决一个适应屏幕高度自伸缩的问题。（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。