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

Posted ryanchancrj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面布局方案-左右固定，中间自适应相关的知识，希望对你有一定的参考价值。

左右固定，中间自适应

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

效果：

技术分享图片

代码：

 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>

 

以上是关于页面布局方案-左右固定，中间自适应的主要内容，如果未能解决你的问题，请参考以下文章

左右两栏固定宽度，中间自适应布局的5种方案

网页自适应布局方案

CSS三栏布局实现，左右固定，中间自适应

css自适应布局（两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应）

《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应

如何实现：左右固定，中间自适应布局，中间栏优先加载？