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
Copy CodeThe code is as follows:
#content {overflow:auto; height:200px; width:600px; background: #f00;}
<textarea id="runcode46133"><! 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;" > Build an iframe effect with CSS </p> <p> from: Yesky page pottery </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
Copy CodeThe code is 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> 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: Yesky </p> <p>a. Direct analog iframe with body for 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 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; 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: Yesky </p> <p>b. Absolute positioning analog iframe, scroll bar outside </p> <p> only C SS Write infinite outline pop-up menu • Browser scroll bar parameterSummary of 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]
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;}
<! 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: Yesky </p> <p>b. Absolute positioning analog iframe, scroll bar inside </p> <p> only C SS Write infinite outline pop-up menu • Browser ScrollBar 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> &L from Gmail T;/body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Tested in IE6.0 and FF1.5 environments
