IFrame applications are common and typically require two types of requirements:
1, get the IFRAME effect, is to bring a scroll bar, you can save a lot of layout.
2, to embed a page, to implement the framework link.
If the IFRAME is not easy to use, you can have the following solutions:
The first requirement is that if we use CSS layouts, we can have fewer pages and more efficiency.
The second requirement can be obtained remotely using XMLHTTP.
A. Direct Analog IFRAME
Use layers to make containers
#content {overflow:auto; height:200px; width:600px; background: #f00;}
Effect Demo Source code:
<textarea id="runcode17611"><! 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> build Iframe effects with CSS-CSS iframe-rexsong.com</title> <style> * {font:12px Aria l;} HTML {overflow:hidden; border:0; height:100%;} body {overflow:hidden; height:100%;} #content {overflow:auto; height:185 px width:600px; Background: #ccc; padding:10px;} </style> </pead> <body> <p style= "font-weight:bold;" > Using CSS to build iframe effects </p> <p> from: Web-based learning </p> <p>a. Directly simulate iframe, use layers to make containers </p> <p> Write unlimited pop-up menus using CSS only • Summary of the parameters of the browser scrollbar • Four ways to introduce CSS style sheets • Two ways to achieve text vertical effects • Web design Advanced Layout 40 Examples • Learn about the standards and ajax</p> from Gmail </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Make a container with body
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> build Iframe effects with CSS-CSS iframe-rexsong.com</title> <style> * {font:12px Aria l;} 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 {posi Tion:absolute;} </style> </pead> <body> <p style= "font-weight:bold; margin-top:0; " > Using CSS to build an IFRAME effect </p> <p> from: Web-based learning </p> <p>a. Directly simulate IFRAME, use body as container </p> <p> Write unlimited pop-up menus using CSS only • Summary of the parameters of the browser scroll bar • Four ways to introduce CSS style sheets • Two ways to achieve text vertical effects • Web design Advanced Layout 40 Examples • Learn about the standards and ajax</p> </body> </ptml> from Gmail
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
B. Absolute positioning Analog IFRAME
Scroll bar is outside
Copy CodeThe code is 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> build Iframe effects with CSS-CSS iframe-rexsong.com</title> <style> * {font:12px Aria l;} HTML {overflow:hidden; border:0; height:100%;} body {overflow:hidden; margin:0; height:100%; position:relative;} #conte NT {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> & lt;/head> <body> <p style= "font-weight:bold; margin-top:0; " > Using CSS to build an IFRAME effect </p> <p> from: Web page tutorial </p> <p>b. Absolute positioning analog iframe, scrollbar outside </p> <p> CS only s write infinite outline pop-up menu • Browser scroll bar parametersSummary • Introduction of CSS style sheet four ways to introduce • Two ways to achieve text vertical effect • Web design Advanced Layout 40 Examples • Learn about the standards and ajax</p> </body> </ptml> from Gmail
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Scroll bar in the inside
Copy CodeThe code is 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> build Iframe effects with CSS-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 #cont ent {top:100px; bottom:0; height:100%;} #head {position:absolute; margin:0; top:0; left:0; width:100%; height:100px; BAC Kground: #ccc; Z-index:5;} #foot {position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background: #ccc;} </style& Gt </pead> <body> <p style= "Font-weIght:bold; margin-top:0; " > Using CSS to build an IFRAME effect </p> <p> from: Web page tutorial </p> <p>b. Absolute positioning analog iframe, scroll bar inside </p> <p> only CS S write unlimited pop-up menu • Browser scroll bar parameter summary • Four ways to introduce CSS style sheets • Two ways to achieve text vertical effects • Web design Advanced Layout 40 Examples • Learn about the standards and ajax</p> < from Gmail ;/body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
