2顶

用div仿框架iframe结构布局的示例代码

稿源：互联网 2022-06-13 18:14:56 点击： 4699 撤稿纠错

div仿框架布局 - iframe无法适应高度的bug也一起被修复了

以下讨论的是和框架 iframe相关的用div仿框架iframe结构布局的示例代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="author" content="Chomo" />
 <link rel="start" href="http://www.14px.com" title="Home" />
 <title>div仿框架布局 - iframe无法适应高度的bug也一起被修复了</title>
 <style type="text/css">
 * { margin:0; padding:0; list-style:none;}
 html { height:100%; overflow:hidden; background:#fff;}
 body { height:100%; overflow:hidden; background:#fff;}
 div { background:#f60; line-height:1.6;}
 .top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
 .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
 .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}
 .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
 .main iframe { width:100%; height:100%;}
 /*---ie6---*/
 html { *padding:70px 10px;}
 .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
 .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
 .main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
 .bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
 </style>
 </head>
 <body>
 <div class="top">看，亲爱的，iframe无法适应高度的bug也一起被修复了。不过这个修复也可以想想其他的办法：）办法就在本文中，有兴趣的朋友可以自己摸索。</div>
 <div class="side">
 
 
 
 
 
 
 
 
 
 </div>
 <div class="main">
 <iframe frameborder="0" src="http://www.g.cn/"></iframe>
 </div>
 <div class="bottom"></div>
 </body>
</html>

关于用div仿框架iframe结构布局的示例代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2009052155995.shtml方便下次再访问哦。

·上一篇： 一个超简单的鼠标焦点显示二级菜单网页特效
·下一篇： 纯CSS打造的三级联动级联菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

用div仿框架iframe结构布局的示例代码

文章分类LIST >>返回首页

最新游戏

最新新闻