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
#content {overflow:auto; height:200px; width:600px; background: #f00;}
Effect Demo Source code:
<textarea id="runcode21018"><! 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: Web Teaching network </p> <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
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%;}
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; 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: Web Teaching network </p> <p>a. Direct simulation of the IFRAME, using the body to do container </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 Code Demo
<! 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: Web Instructional network </p> <p>b. Absolute positioning simulate IFRAME, scroll bar 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;}
Effect Demo 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 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: Web Teaching network </p> <p>b. Absolute positioning simulate IFRAME, scroll bar in inside </p> </div> </div> <div id= "Conte NT "> <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 in 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]
