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:
用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%;}
效果演示源代码：
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;}
效果代码演示
滚动条在里边
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;}
效果演示代码：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
