微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > css教程 > 正文

用CSS构建iframe效果_CSS/HTML

php中文网

发布： 2016-05-16 12:11:11

原创

1660人浏览过

iframe应用很普遍，通常的需求有两种：
1，获取iframe效果，就是带一个滚动条，可以省不少版面。
2，要嵌一个页面，实现框架链接。
如果不方便使用iframe，可以有如下解决方案：
第一种需求如果我们使用CSS布局来实现，即可以少一个页面，也可以提高效率。
第二种需求可以采用xmlhttp远程获取。
A. 直接模拟iframe
用层做容器

复制代码代码如下:

#content { overflow:auto; height:200px; width:600px; background:#f00;}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>
<style> 
* { font:12px Arial;} 
html { overflow:hidden; border:0; height:100%;} 
body { overflow:hidden; height:100%;} 
#content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;} 
</style>
<h4 style="font-weight:bold;">用CSS构建iframe效果</h4> 
<p>来自：<a href="http://homepage.yesky.com/" target="_self">天极网页陶吧</a></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/1207">
                            <img src="https://img.php.cn/upload/webcode/000/000/001/59881bcf9111a517.png" alt="H-ui.admin后台管理模版 3.1.3.1">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/1207">H-ui.admin后台管理模版 3.1.3.1</a>
                            <p>H-ui.admin是用H-ui前端框架开发的轻量级响应式网站后台管理模版，采用原生HTML语言，iframe结构布局，多选项卡效果，完全免费，简单灵活，兼容性好，让您快速搭建中小型网站后台。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="H-ui.admin后台管理模版 3.1.3.1">
                                <span>332</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/1207" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="H-ui.admin后台管理模版 3.1.3.1">
                        </a>
                    </div>
                
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 
<p>A. 直接模拟iframe，用层做容器</p> 
<div id="content"> 
 <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a>
 
    ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

用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%;}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>
<style> 
* { font:12px Arial;} 
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/<a href=" http:>javascript"> 
</script><script type="text/javascript"> 
_uacct = "UA-67927-3"; 
urchinTracker(); 
</script><div id="info"> 
 <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4> 
 <p>来自：<a href="http://homepage.yesky.com">天极网页陶吧</a></p> 
 <p>A. 直接模拟iframe，用body做容器</p> 
</div> 
 <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a>
 
    ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

B. 绝对定位模拟iframe
滚动条在外边

复制代码代码如下:

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;}  
 

效果演示源代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>
<style> 
* { font:12px Arial;} 
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><div id="head"> 
 <div style=" padding:12px 0 0 26px;_padding:6px 0 0 26px;"> 
  <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4> 
<p>来自：<a href="http://homepage.yesky.com/" target="_self">天极网页陶吧</a></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 
  <p>B. 绝对定位模拟iframe，滚动条在外边</p> 
 </div> 
</div> 
<div id="content"> 
 <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a>
 
    ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

滚动条在里边

复制代码代码如下:

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;}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用CSS构建iframe效果 - 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><div id="head"> 
 <div style=" padding:12px 0 0 10px;_padding:6px 0 0 10px;"> 
  <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4> 
<p>来自：<a href="http://homepage.yesky.com/" target="_self">天极网页陶吧</a></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 
  <p>B. 绝对定位模拟iframe，滚动条在里边</p> 
 </div> 
</div> 
<div id="content"> 
 <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a>
 
    ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

在IE6.0和FF1.5环境下测试通过

HTML速学教程(入门课程)

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：CSS实现简单的图片防盗链代码_CSS/HTML 下一篇：CSS基础学习_CSS/HTML

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

CSS布局有哪些常用方式_CSS布局方法与实践技巧浮动布局适用于图文环绕但需清除浮动，2.定位布局适合弹窗吸顶但不用于整体排版，3.Flexbox简化一维对齐与分布，4.Grid实现二维复杂页面结构，5.多列布局类报纸排版，6.响应式需结合媒体查询与布局优势，选择依据场景需求。

2025-11-21 11:41:33

919

CSS布局中的文字对齐技巧_text-align vertical-align应用 text-align用于块级元素内行内内容的水平对齐，如left、center、justify；vertical-align用于行内或表格元素的垂直对齐，如middle、top，二者不可混用，常配合display:table-cell或line-height实现居中效果。

2025-11-21 11:38:02

162

Flexbox元素响应式调整如何实现_Flex basis与media query优化方案通过结合flex-basis与mediaquery，可在不同屏幕尺寸下灵活调整元素宽度，实现响应式Flex布局；例如桌面端设为300px自适应伸缩，平板改为两列，手机端全宽堆叠，配合min-width、flex-wrap和clamp()等优化手段，提升多设备兼容性与视觉体验。

2025-11-21 11:34:02

275

CSS外边距合并margin collapse机制解析_上下margin合并实践外边距合并是指两个垂直相邻的块级元素的外边距会合并为一个外边距，其大小取两者中的较大值。该现象常见于兄弟元素、父子元素及空元素自身上下边距之间，如两个div的上下margin分别为20px和30px时，实际间距为30px而非50px；可通过添加border、padding，触发BFC（如overflow:hidden或display:flow-root），使用flex/grid布局等方式防止合并；掌握此机制有助于精准控制页面布局，避免间距异常。

2025-11-21 11:25:02

257

如何使用CSS实现滑动面板平滑过渡_left与transform结合答案：通过结合CSS的left属性与transform可实现滑动面板的平滑过渡，其中transform:translateX()因性能更优被推荐用于位移动画，而left适用于布局定位；在实际应用中，应优先使用transform处理动态滑动，并为动画元素添加will-change:transform以提升性能，同时确保transition时间一致避免冲突，从而实现流畅且高效的滑动效果。

2025-11-21 11:01:02

166

CSS初级项目如何实现响应式图标布局_Flex与媒体查询结合使用Flexbox和媒体查询实现响应式图标布局，.icon-container采用flex布局并设置flex-wrap:wrap与gap间距，结合justify-content:space-around实现均匀分布；通过@media查询在不同屏幕尺寸下调整显示效果：≥1024px每行6个，768px~1023px每行最多4个，适配移动端。

2025-11-21 10:59:02

961

如何使用CSS实现响应式卡片布局_网格布局与弹性盒子结合使用CSSGrid定义容器布局，auto-fit与minmax实现自适应列宽；2.Flexbox用于卡片内部，确保内容垂直排列、按钮对齐底部；3.配合媒体查询优化不同屏幕尺寸下的显示效果，提升可读性与操作体验。

2025-11-21 10:23:14

502

CSS伪元素::before与::after使用方法_添加内容与装饰 ::before和::after通过content属性为元素前后添加生成内容，常用于装饰或提示；必须设置content才能生效，可插入文本、属性值或图片，默认为行内元素，适用于非自闭合标签，注意不可用于img等自闭合元素，且内容不被选中、抓取或读屏设备识别，适合非关键性视觉增强。

2025-11-21 10:17:02

606

CSS框架Bulma与Flexbox结合实现响应式布局_实践应用 Bulma基于Flexbox构建响应式布局，通过columns与column类实现弹性排列，结合is-half、is-8-desktop等断点类控制多设备显示，支持原生flex属性扩展，适用于仪表盘等复杂场景。

2025-11-21 10:12:06

606

Grid布局中align-self属性如何使用_单个子元素对齐技巧 align-self用于控制单个网格项在区域内的垂直对齐，覆盖align-items；取值包括start（顶部）、end（底部）、center（居中）、stretch（拉伸）；可单独设置如.item2{align-self:center}实现独立对齐；配合margin可微调位置，适用于表单、卡片按钮底部固定等场景。

2025-11-21 10:09:07

154

相关专题

更多>

热门推荐

HTML速学教程(入门课程)

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部