基础系列：布局解决方案【全屏布局】

 定宽用px计算

设计图

思路一position

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        html,body,.parent{height: 100%;overflow: hidden;}
        .top{
            position: absolute;top:0; left: 0;right: 0;height: 100px;
        }                  
        .left{position: absolute;left: 0;top:100px; bottom:50px ; width: 200px;} 
        .right{
            position: absolute;overflow: outo;
            left: 200px;right: 0;top:100px;bottom: 50px;
        }
        .bottom{ 
            position: absolute;left: 0;
            right: 0;
            height: 50px;
        }
        .right .inner{
            min-height: 1000px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="top">top</div>
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
        <div class="bottom">bootom</div>
    </div>
</body>
</html>

参考：http://nec.netease.com/library/141027

 

思虑二flex

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        html,body,.parent{height: 100%;overflow: hidden;}
        .parent{display:flex; flex-direction:column;}
        .top{
            height: 100px;
        }
        .bottom{ 
            height: 50px;
        }
        .middle{
            flex:1;display: flex;
        }
        .left{width: 200px;}
        .right {
            flex:1;overflow: auto;
        }
        .right .inner{min-height: 1000px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="top">top</div>
        <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
        </div>
        <div class="bottom">bootom</div>
    </div>
</body>
</html>

 

 定宽用百分比表示

 

  • 设计图

思路一 position

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        html,body,.parent{height: 100%;overflow: hidden;}
        .top{
            position: absolute;top:0; left: 0;right: 0;height: 10%;
        }                  
        .left{position: absolute;left: 0;top:10%; bottom:5% ; width: 20%;} 
        .right{
            position: absolute;overflow: outo;
            left: 20%;right: 0;top:10%;bottom: 5%;
        }
        .bottom{ 
            position: absolute;left: 0;
            right: 0;
            height: 5%;
        }
        .right .inner{
            min-height: 1000px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="top">top</div>
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
        <div class="bottom">bootom</div>
    </div>
</body>
</html>

思路二flex

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        html,body,.parent{height: 100%;overflow: hidden;}
        .parent{display:flex; flex-direction:column;}
        .top{
            height: 10%;
        }
        .bottom{ 
            height: 5%;
        }
        .middle{
            flex:1;display: flex;
        }
        .left{width: 20%;}
        .right {
            flex:1;overflow: auto;
        }
        .right .inner{min-height: 1000px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="top">top</div>
        <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
        </div>
        <div class="bottom">bootom</div>
    </div>
</body>
</html>

 

 

自适应

思路— flex

  1. 把定宽的高度去掉就可以
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        html,body,.parent{height: 100%;overflow: hidden;}
        .parent{display:flex; flex-direction:column;}
       
        .middle{
            flex:1;display: flex;
        }
   
        .right {
            flex:1;overflow: auto;
        }
        .right .inner{min-height: 1000px;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="top">top</div>
        <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
        </div>
        <div class="bottom">bootom</div>
    </div>
</body>
</html>

 

posted @ 2015-08-04 23:26  哪有公园可以住的呀  阅读(174)  评论(0)    收藏  举报