码迷,mamicode.com
首页 > 其他好文 > 详细

解决一个适应屏幕高度自伸缩的问题。(二)

时间:2014-11-20 15:15:19      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   ar   color   sp   on   div   问题   

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; 
 
 
<!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>

 

解决一个适应屏幕高度自伸缩的问题。(二)

标签:style   blog   http   ar   color   sp   on   div   问题   

原文地址:http://www.cnblogs.com/lixiaoyaoslove/p/4110530.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!