如何拆分浏览器窗口

Question

我正在研究一个基于Web的应用程序，我需要垂直拆分浏览器窗口。 右栏将是html/css和应用程序的内容部分，而左栏将显示另一个网站，它将使用大部分空间。 我相信我可以用iframe来做到这一点，但我想知道是否有其他方法可以给它。

左栏是应用程序的一部分，因此如果用户选择禁用它，并且外部网站/ iframe应该占用整个窗口宽度，那么它是可选的。

我需要为两列有两个垂直滚动条，左列不应该与另一列重叠。

如果有人能指引我正确的方向，我将不胜感激。

谢谢。

Answer 1

您可以使用div分割窗口，并通过隐藏一个div另一个将使用该空间。检查此代码示例：

<button onclick="document.getElementById('leftArea').style.display='none'">Hide Left Area</button> 

      <div style="width:100%; height:100%"> 
       <div id="leftArea" style="float:left;width:50%;background-color:#FF0000"> 
        Left Area - iframe below:<br/> 
        <iframe src="" width="100%" height="100%"> </iframe> 
       </div> 
       <div style="width:100%; background-color:#0000FF"> 
       Right Area 
       </div> 
      </div> 

Answer 2

检查了这一点。 可能是一个可能的解决方案，但我个人认为iframe是要走的路。

http://camendesign.com/code/splitscreen