在瀏覽器中模擬窗口尺寸

Question

我正在製作一個WYSIWYG編輯器，用於構建響應式佈局（通過Bootstrap），作爲一個側面項目。我希望我可以構建它以使用縮放/滾動功能（類似於PDF查看器或Photoshop），並允許用戶設置/更改網站被渲染到的「窗口」的尺寸。

爲了確保WYSIWYG編輯器正確顯示佈局，我想把它放在div的內部，並將div的尺寸設置爲我正在模擬的瀏覽器窗口的尺寸。這是可能的，使用液體佈局嗎？否則，我可以編輯JS來尋找目標div而不是窗口來檢測尺寸，但我更喜歡前一種方法。

謝謝！

Answer 1

您可以使用css絕對定位讓div佔據瀏覽器視口的定義部分，而不管其他html是否存在。這可以使用px來實現，從瀏覽器邊緣的偏移或百分比視圖的百分比。因此，舉個例子，你可以定義一個「窗口」並繼續在該窗口中進行佈局。絕對定位的元素的子元素默認不會繼承絕對定位，因此子元素將在平常位置內進行佈局：絕對元素。

#window { 
    position: absolute; 
} 

自舉佈局與它是滾動部件絕對定位的窗口的例子，來看看：

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

列表除了具有CSS定位的一個很好的概述在http://www.alistapart.com/articles/css-positioning-101/