0

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

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

谢谢！

4

1 回答 1

0

您可以使用 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 定位概述

于 2012-12-07T03:13:11.630 回答