Imprint: Use css style settings iframe
Iframe application is common, usually there are two demands:
1. Access iframe effect, with a rolling of the layout can save a lot.
2. Inlay to a page and realize framework links.
If it is not convenient to use iframe, corresponding solutions are as follows:
1. Css layout can be used to achieve that can be less a page, can also improve the efficiency of the implementation.
2. Xmlhttp can be used remotely access data.
A. Direct Simulation iframe
Done with layer containers
# Content (overflow: auto; height: 185px; width: 600px; background: # ccc; padding: 10px;)
Effect Demo: http://www.rexsong.com/blog/attachments/200601/02_150246_cssiframe1.htm
Containers do with body
Html (overflow: hidden; height: 100%; background: # fff; border: 0;)
Html * (padding: 200px 0 0100 px;)
Body (overflow: auto; background: # ccc; margin: 0; position: absolute; top: 200px; left: 100px; bottom: 0; right: 0;)
(* Html body height: 100%; width: 100%; position: static;)
Effect Demo: http://www.rexsong.com/blog/attachments/200601/02_151517_cssiframe2.htm
B. absolute positioning simulation iframe
Outside of the rolling
Html (overflow: hidden; border: 0; height: 100%;)
Body (overflow: hidden; margin: 0; height: 100%; position: relative;)
# Content (height: 100%; position: relative; z-index: 1; overflow: auto;)
(# Head position: absolute; top: 0; right: 16px; width: 100%; height: 100px; background: # ccc; z-index: 2;)
# Foot (position: absolute; bottom: 0; right: 16px; width: 100%; background: # ccc; height: 50px; z-index: 2;)
Effect Demo: http://www.rexsong.com/blog/attachments/200601/02_151837_cssiframe3.htm
In the inside of the rolling
Html (height: 100%; max-height: 100%; border: 0; overflow: hidden;)
Html * (padding: 100px 0 50px 0;)
Body (height: 100%; max-height: 100%; margin: 0; overflow: hidden;)
# Content (position: absolute; top: 100px; bottom: 50px; left: 0; right: 0; z-index: 3; width: 100%; overflow: auto;)
* Html # content (top: 100px; bottom: 0; height: 100%;)
(# Head position: absolute; margin: 0; top: 0; left: 0; width: 100%; height: 100px; background: # ccc; z-index: 5;)
# Foot (position: absolute; margin: 0; bottom: 0; left: 0; width: 100%; height: 50px; z-index: 5; background: # ccc;)
Effect Demo: http://www.rexsong.com/blog/attachments/200601/02_153241_cssiframe4.htm
Emphasize that, the standard model to body as a container, basic and div similar, and this is very different from the traditional concepts. Html and find out the relationship between the body, the High natural layout of the many problems solved.
Tags: Border Style, css style, css style sheet, div style, List Style Type, style
Leave a Reply