CSS Layout Series-Integrated Application

Years ago, and I don't know what to do next year. I am engaged in information system research and development, has more than four load dry so long time, feel what will be a little, you let me go to do I also dry out, but, sometimes want to feel nothing, alas. I am going to want to do the front end next year, I hope someone will take shelter! If you recruit people can also m I oh.

Don't talk about it. Enter the topic to combine the previous several said, today to introduce information management system layout, in fact I have seen information management system is mostly this layout. Please see:

The analysis is performed first:

• First from the top down, you can be divided into the upper and lower three parts, and then from left to right to see the left to two parts;
• From the top down to the three parts of the height plus exactly equal to the visual surface height, no script to calculate its height, so that the style is well written, will write less script code. The height of the upper and lower two parts is fixed, and the height of the middle part is self-adapting;
• From left to right, the left width is fixed, the right width is adaptive;

Comprehensive analysis above, in fact, are the previous several introduced, but I am here for a comprehensive application, so that we have a more intuitive feeling, here is not how to achieve. The implementation code is posted below:

 *{margin:0;padding:0; box-sizing:border-box;}         HTML, body{height:100%;font-size:14px;} . container{height:100%;}. Top,. Bottom{width:100%;height:60px;background-color:rgb (152,210,250);}. bottom{ position:absolute;bottom:0;height:30px;line-height:30px;} . Middle{width:100%;top:60px;background-color:rgb (250,250,250);p Osition:absolute;bottom:30px;overflow:auto;         Border:solid 1px Red;} . left{width:150px;position:absolute;top:0;left:0px;height:100%;}. Center{margin-left:150px;height:100%;overflow         : Hidden;} . Menu{line-height:40px;list-style:none;}. menu Li{padding-left:10px;border-bottom:solid 1px #ccc; cursor:pointer;}. Menu Li:hover{background-color: #f60;} 

 <div class= "Container" > <div class= "top" > XXX information Management system originally CSS well written, will write a lot less JS code. </div> <div class= "Middle" > <div class= "left" > <ul class= "menu" id= " Menu "> <li src= ' http://www.cnblogs.com ' >cnblogs</li> <li src= ' http                    ://www.baidu.com ' >baidu</li> <li src= ' http://www.163.com ' >163</li> <li src= ' http://www.sina.com ' >sina</li> <li src= ' http://www.mop.com ' &GT;MOP&LT;/LI&G                T </ul> </div> <div class= "center" > <iframe src= "Http://www.cnblog S.com "style=" width:100%; height:100%, "id=" ifrmcontent "frameborder=" 0 "></iframe> </div> </        div> <div class= "bottom" > XXX copyright belongs to xxx all. </div> </div>

Integrated Application Example Source code

CSS Layout Series-Integrated Application