在浏览器中模拟窗口尺寸

Question

我正在开发一个 WYSIWYG 编辑器，用于构建响应式布局（通过 Bootstrap），作为一个副项目。我希望我可以构建它以使用缩放/滚动功能（类似于 PDF 查看器或 Photoshop），并允许用户设置/更改网站在其中呈现的“窗口”的尺寸。

为确保 WYSIWYG 编辑器正确显示布局，我想将其放在 div 中，并将 div 的尺寸设置为我正在模拟的浏览器窗口的尺寸。这是否可以开箱即用，使用流式布局？否则我可以编辑 JS 以查找目标 div 而不是窗口以检测尺寸，但我更喜欢前一种方法。

谢谢！

Answer 1

您可以使用 css 绝对定位让 div 占据浏览器视口的已定义部分，而不管其他 html 是否存在。这可以使用 px 从浏览器边缘的偏移量或百分比视图的百分比来完成。因此，鉴于您的示例，您可以定义一个“窗口”并继续在该窗口中进行布局。绝对定位元素的子元素默认不会继承绝对定位，因此子元素将照常布局在 position: absolute 组件内。

#window {
  position:  absolute;
}

作为一个具有绝对定位窗口的 Bootstrap 布局示例，其中包含可滚动的组件，请查看：

http://jsfiddle.net/timburgess/ZTt5M/

A List Apart 在http://www.alistapart.com/articles/css-positioning-101/ 上有一个很好的 CSS 定位概览