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>
