The application of IFrame is very common, there are usually two kinds of requirements:
1, to obtain an IFRAME effect, that is, with a scroll bar, you can save a lot of suites.
2, to embed a page, to implement the framework link.
If you are not convenient to use IFRAME, you can have the following solutions:
The first requirement if we use CSS layout to implement, that is, can be less than one page, can also improve efficiency.
The second requirement can be obtained remotely using XMLHTTP.
A. Direct simulation of IFRAME
use layers to make containers
Copy Code code as follows:
#content {overflow:auto; height:200px; width:600px; background: #f00;}
<textarea id="runcode91054"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> use CSS to build an Iframe effect-css iframe-rexsong.com</title> <style> * {font:12px A rial;} HTML {overflow:hidden; border:0; height:100%;} body {overflow:hidden; height:100%;} #content {overflow:auto; height:185px; width:600px; background: #ccc; padding:10px;} </style> </pead> <body> <p > Using CSS to build an IFRAME effect </p> <p> from: Tenkine page <p> ; A. Directly simulate the IFRAME, use the layer to do the container </p> <div id= "Content" > <p> only use CSS to write an infinite outline popup menu • The parameters of the browser scroll bar summary • Four ways to introduce a CSS style sheet Two ways to achieve text vertical effect • Web design Advanced Layout 40 Cases Reference • Learn from Gmail Standard and ajax</p> </div> </body> </ptml> </textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
use body to make containers
Copy Code code as follows:
HTML {overflow:hidden; height:100%; background: #fff; border:0;}
* HTML {padding:100px 0 0 100px;}
body {overflow:scroll; background: #f00; margin:0; position:absolute; top:100px; left:100px; bottom:0; right:0;}
* HTML body {height:100%; width:100%;}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> use CSS to build an Iframe effect-css iframe-rexsong.com</title> <style> * {font:12px A rial;} HTML {overflow:hidden; height:100%; background: #fff; border:0;} * HTML {padding:200px 0 0 100px;} 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;} #info {position:fixed; top:10px; left:10px;} * HTML #info {position:absolute;} </style> <script src= "http://www.google-analytics.com/urchin.js" type= "Text/javascript" > </script > <script type= "text/javascript" > _uacct = "ua-67927-3"; Urchintracker (); </script> </pead> <body> <div id= "Info"> <p > Using CSS to build an IFRAME effect </p> <p> from: Tenkine <p>a. Direct simulation of the IFRAME, with the body to do containers </p> &L T;/div> <p> only use CSS to write unlimited hierarchical pop-up menu • Browser scroll bar Parameters Summary • Introduction of CSS style sheet four ways to introduce two ways to achieve text vertical effect • Web design Advanced Layout 40 cases reference • Understanding the Standard and ajax</p> </body> </ptml> from Gmail
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
B. Absolute positioning Simulation iframe
Scroll bar on the outside
Copy Code code as follows:
HTML {overflow:hidden; border:0; height:100%; max-height:100%;}
body {overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;}
#head {position:absolute; top:0; right:15px; width:100%; height:100px; background: #f00; z-index:2;}
#foot {position:absolute; bottom:0; right:15px; width:100%; background: #f00; height:50px;z-index:2;}
#content {height:100%; position:relative; z-index:1; overflow:auto;}
Effect Demo Source code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> use CSS to build an Iframe effect-css iframe-rexsong.com</title> <style> * {font:12px A rial;} 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;} </style> <script type= "Text/javascript" > _uacct = "ua-67927-3"; Urchintracker (); </script> </pead> <body> <div id= "Head" > <div > <p > To build an iframe effect </p> with CSS <p> From: Tenkine </p> <p>b. Absolute positioning simulate IFRAME, scroll bar in the outside </p> </div> </div> <div id= "Content" > <p> only use CSS to write unlimited hierarchical pop-up menu • Browser scroll bar Parameters Summary • Introduction of CSS style sheet four ways to introduce the text vertical effect of two ways • Web design Advanced Layout 40 cases reference • From Gmail Knowledge of the standard and ajax</p> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Scroll bar in the inside
Copy Code code as follows:
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: #f00; z-index:5;}
#foot {position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background: #f00;}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> use CSS to build an Iframe effect-css iframe-rexsong.com</title> <style type=" Text/css "> * {font:12px Arial; 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;} </style> <script type= "Text/javascript" >_uacct = "ua-67927-3"; Urchintracker (); </script> </pead> <body> <div id= "Head" > <div > <p > To build an iframe effect </p> with CSS <p> from: Tenkine </p> <p>b. Absolute positioning simulate IFRAME, scroll bar inside </p> </div> </div> <div id= "cont Ent "> <p> only use CSS to write unlimited hierarchical pop-up menu • Browser scroll bar Parameters Summary • Introduction of CSS style sheet four ways to introduce the text vertical effect of two ways • Web design Advanced Layout 40 cases reference • Learn from Gmail standards and ajax</p> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Test through in IE6.0 and FF1.5 environments
