iframe frame layout;Project often use to iframe,iframe although more problems, but also relatively old, but some projects are still needed, general project situation as follows: General requirements: Let the iframe filled with content div area, and window size changes when the adaptive. The previous solution is through JS to determine the width of the window, and then use the Windows width minus the left and the size of the head to get the height of the iframe, and Add Window Resize event function, when the window size changes, the implementation of the wide-height calculation method. This way the disadvantage is JS running overhead, each window to change the size of the need to rerun JS, the browser is very unfriendly. Improved approach: Layout through CSS, with emphasis on a principle:
can use CSS layout never use JS control. The implementation of the diagram is as follows: through the use of CSS Border-box properties, in the IFRAME outside the area set a iframe-content class name Div, box-sizing from the IE8 start compatible, IE7 classmate, or obediently write JS bar. The specific CSS is as follows:. frame-content{position:absolute; top:0 left:0; width:100%; height:100%; Z-index:-1; padding-top:80px;// Head height padding-left:200px;//left menu width box-sizing:border-box; }. frame-content iframe{display:block width:100% height:100%; header{Position:absolute; left:0 %; height:80px; Z-index:2; left-menu{position:absolute; left:0; top:0; padding-top:80px; width:200px; height:100%; overflow-y:auto; z-index:1; Box-sizing:border-box; }
multi-column layout;Multi-column Layout reference bootstrap grid structure, the review element can know the implementation method. To 12 as an example, the principle is to divide the overall width into 12 equal, through the div ratio set width, block and block spacing between the padding simulation, so that when the screen resolution changes, the media query resolution, set the corresponding block size, can achieve adaptive effect. The following is a brief introduction to the implementation: body{Background-color: #f5f5f5; padding:20px 10px 10px 10px; col-1{width:8.33%; col-2{width:16.66%; ol-3{width:25%; col-4{width:33.33%;}. col-5{width:41.66%; col-6{width:50%; col-7{width:58.33%: \ n 66.66%;} . col-9{width:75%}. col-10{width:83.33%}. col-11{width:91.66%; col-12{width:100%; col-1,.col-2,.col-3,.col-4, . col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{float:left; box-sizing:border-box; padding-right:10px ;/around add up to 20px spacing padding-left:10px; margin-bottom:20px;//spacing is 20px}
Mouse to move into the display multicolor picture;Recently saw the gray sponsor icon online, the mouse moved into a color effect. Review elements, see implementation is also relatively simple, sharing CSS as follows: img {transition:all 0.3s ease; Filter:grayscale (100%);//Key attributes, turn the picture into grayscale opacity:0.66;} img:ho ver {filter:none; opacity:1;}
There is a magic wood.
Author: The beginning of things
Sign: As long as you are trying, it is not a failure.
