HTML和CSS经典布局5

如下图：

需求：

1. 如图

2. 可以从body标签开始。

3. 页面内容高度设置高点，把窗口的滚动条显示出来，但是busy indicator不滚动。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style>
 6         #content {
 7             overflow: hidden;
 8         }
 9         .column-left {
10             float: left;
11             width: 200px;
12             min-height: 500px;
13         }
14         .column-right {
15             float: right;
16             width: 200px;
17             min-height: 500px;
18         }
19         .column-middle {
20             margin: 25px 225px;
21             min-height: 500px;
22         }
23         .busy {
24             position: fixed;
25             z-index: 1;
26             width: 100%;
27             height: 100%;
28             background-color: rgba(100, 100, 100, 0.5);
29             top: 0px;
30             left: 0px;
31         }
32             .busy span {
33                 display: block;
34                 position: absolute;
35                 top: 50%;
36                 left: 50%;
37                 width: 100px;
38                 height: 60px;
39                 margin-left: -50px;
40                 margin-top: -30px;
41                 background-color: #ffffff;
42                 border: 2px solid #444444;
43                 text-align: center;
44                 line-height: 60px;
45                 border-radius: 50px;
46             }
47     </style>
48 </head>
49 <body>
50     <div id="header" style="height: 50px; background: blue;">
51         
52     </div>
53     <div id="content">
54         <div class="column-left" style="background-color: purple;">
55             
56         </div>
57         <div class="column-right" style="background-color: yellow;">
58             
59         </div>
60         <div class="column-middle" style="background-color: pink;">
61             
62         </div>
63     </div>
64     <div class="busy">
65         <span>
66             Loading...
67         </span>
68     </div>
69 </body>
70 </html>