Home >Web Front-end >CSS Tutorial >Use CSS to build iframe effect code_Experience exchange
Use CSS to build iframe effect code_Experience exchange
- WBOYOriginal
- 2016-05-16 12:07:441518browse
iframe applications are very common, and there are two common requirements:
1. To obtain the iframe effect, it is to bring a scroll bar, which can save a lot of space.
2. Embed a page to implement frame linking.
If it is not convenient to use iframe, you can have the following solutions:
If we use css layout to implement the first requirement, we can save one page and improve efficiency.
The second requirement can be obtained remotely using xmlhttp.
A. Directly simulate iframe
Use layers as containers
#content { overflow:auto; height:200px; width:600px; background:#f00;}
Effect demonstration source code:
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]
用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%;}
效果演示源代码：
[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;}
效果代码演示
[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;}
效果演示代码：
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn