页面布局方案-左右固定，中间自适应

左右固定，中间自适应

三列布局，左右固定，中间自适应，高度自适应

效果：

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>左右固定，中间自适应</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <style type="text/css">
 7         html,body{margin:0; height: 100%;}
 8         .cui_layout_container{
 9             height:100%;
10         }
11         .float_left{
12             float:left;
13         }
14         .float_right{
15             float:right;
16         }
17         .cui_layout_container .right_side,
18         .cui_layout_container .left_side,
19         .cui_layout_container .middle{
20             height: 100%; overflow: auto;
21         }
22         .cui_layout_container .middle .middle_content{
23             height: 100%;
24             width:100%;
25             overflow: auto;
26         }
27         .cui_layout_container .left_side{
28             width:200px;/*左侧宽度*/
29             background-color:#FFE69F;
30         }
31         .cui_layout_container .right_side{
32             background-color:#FFE69F;
33             width:200px; /*右侧宽度*/
34         }
35         .cui_layout_container .middle {
36             background-color:#ff6600;
37         }
38     </style>
39 </head>
40 <body>
41 <div class="cui_layout_container">
42     <div class="left_side float_left">
43         左侧固定
44     </div>
45 
46     <div class="right_side float_right">
47         右侧固定
48     </div>
49 
50     <div class="middle">
51         <div class="middle_content">
52              中间自适应
53         </div>
54     </div>
55 </div>
56 </body>
57 </html>

 

posted @ 2018-02-07 20:25  RyanChan  阅读(643)  评论(0)  编辑  收藏  举报