布局解决方案之全屏布局

方案1：Position

CSS代码：

 1 html,body,.parent{
 2     height: 100%; 
 3     overflow: hidden;
 4 }
 5 .top{
 6     position: absolute;
 7     height: 100px;
 8     top: 0;
 9     left: 0;
10     right: 0;
11     background-color: green;
12 }
13 .left{
14     position: absolute;
15     width: 200px;
16     top: 100px;
17     left: 0;
18     bottom: 50px;
19     background-color: pink;
20 }
21 .right{
22     position: absolute;
23     top: 100px;
24     left: 200px;
25     bottom: 50px;
26     right: 0;
27     overflow: auto;
28     background-color: blue;
29 }
30 .bottom{
31     position: absolute;
32     height: 50px;
33     left: 0;
34     right: 0;
35     bottom: 0;
36     background-color: green;
37 }

HTML代码：

1 <div class="parent">
2     <div class="top"></div>
3     <div class="left"></div>
4     <div class="right"></div>
5     <div class="bottom"></div>
6 </div>

 

方案2：Flex

CSS代码：

 1 html,body,.parent{
 2     height: 100%; 
 3     overflow: hidden;
 4 }
 5 .parent{
 6     display: flex;
 7     flex-direction:column;
 8 }
 9 .top{
10     height: 100px;
11     background-color: red;
12 }
13 .middle{
14     flex:1;
15     display: flex;
16 }
17 .bottom{
18     height: 50px;
19     background-color: red;
20 }
21 .left{
22     width: 200px;
23     background-color: green;
24 }
25 .right{
26     flex:1;
27     overflow: auto;
28     background-color: blue;
29 }

HTML代码：

1 <div class="parent">
2     <div class="top"></div>
3     <div class="middle">
4         <div class="left"></div>
5         <div class="right"></div>
6     </div>
7     <div class="bottom"></div>
8 </div>

 其中设置宽、高为固定数值的均可以用百分比来代替，视具体要求而定。

posted @ 2015-08-18 11:04  yxz_turing  阅读(214)  评论(0)  编辑  收藏  举报