Css 您如何对待布局的特定Div或部分'；s自己的独立视口？

我正在使用下图中绘制的响应性web布局。红色区域固定在屏幕上，绿色区域是可独立滚动的部分（蓝色=滚动条）

我想知道-有没有办法（没有iFrame）将此版面的主要内容部分（右侧的绿色区域）视为视口本身，这样内容和样式就可以像它自己的独立全屏一样工作？

我之所以尝试这样做，是因为我希望尽可能简单地将第二个网站的内容直接放入这个主要内容部分，而无需调整所有页面以适应网站的狭窄部分

第二个站点是使用twitter引导为脚手架构建的，由于容器都是相对于某人的视口大小创建的，因此它们不适合稍微狭窄的内容区域（给定左侧边栏），而无需调整所有脚手架。我不想在很多页面上调整所有内容，因此，我正在寻找一种方法，看看我是否可以让它适合我（祈祷有东西存在！）

此外，左侧边栏是可折叠的——因此可能会出现主内容部分占据整个视口宽度的情况。因此，我希望它能够动态调整

我似乎有3个选择：

浏览第二个站点的每一页，对每一页中的所有脚手架进行返工，以确保其使用稍微狭窄的部分，基本上将左侧边栏视为第一个跨度柱，然后调整整个站点，使其在剩余宽度内工作此选项实际上不起作用，因为如果侧边栏折叠，则主内容区域将占据整个宽度，并且现在会更窄

使用iFrames-我不考虑这一点，因为这会产生所有的影响

以某种方式将主要内容区域视为其自己的视口，以便所有脚手架都可以调整为任何大小，就好像它是视口本身或全屏一样。

这有可能吗

是否有更好的替代方案

---

谢谢

“既然容器都是相对于某人的视口大小创建的”-这是如何做到的？容器尺寸是否基于视口尺寸设置？Twitter的bootstrap能做到这一点吗？@ŠimeVidas是的，它是通过媒体查询来实现的，以使其具有响应性。请参见此处：没有回答，因为我没有测试过任何问题：您是否尝试过SVG

foreignObject

？不，您不能将任意HTML元素指定为其自己的独立视口。谢谢@BoltClock，我想这不会那么容易。