Question

如果您查看http://www.twitch.tv/twitch，您会看到该页面有三个独立的＆＃34;框架＆＃34;：左，中，右。每个滚动独立于另一个。但是，该页面不使用框架（或iframe）标签。那么，他们是如何做到的？

Answer 1

使用div和css ......

position: fixed; top: 0px;

滚动时停止左右列移动

overflow: hidden; and overflow-y: scroll;

如果内容不适合定义的高度，

为其中一个部分添加额外的滚动条。

<div style="position: fixed; top: 0px; overflow: hidden; width: 100px">
   left content
    <div style="top: 10px; height: 200px; overflow: hidden; overflow-y: scroll;">   blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
    </div>
</div>

<div style="position: absolute; left: 120px; overflow: hidden; overflow-y: scroll; width:800px">
   center   blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
</div>

<div style="position: fixed; top: 0px; right: 0px;  width: 100px">
   right
</div>

有一个小提琴http://jsfiddle.net/yR4tY/

如何在不使用框架标签的情况下制作具有单独框架的网页？

1 个答案: