Эмулировать размеры окна в браузере

Question

Я работаю над редактором WYSIWYG для создания адаптивных макетов (через Bootstrap), как побочный проект. Я надеюсь, что смогу создать его для работы с функцией масштабирования / прокрутки (похожей на просмотрщиков PDF или Photoshop) и позволить пользователю устанавливать / изменять размеры "окна", в котором отображается сайт.

Чтобы редактор WYSIWYG правильно отображал макеты, я бы хотел поместить его в div и установить размеры div в соответствии с размером окна браузера, которое я эмулирую. Возможно ли это из коробки, используя жидкие макеты? В противном случае я могу отредактировать JS, чтобы искать целевой div вместо окна, чтобы определить размеры, но я бы предпочел первый метод.

Спасибо!

Answer 1

Вы можете использовать абсолютное позиционирование css, чтобы div занимал определенную часть окна просмотра браузера независимо от того, какой другой html существует. Это можно сделать, используя px для смещения от краев браузера или проценты для просмотра в процентах. Итак, учитывая ваш пример, вы можете определить "окно" и перейти к макету в этом окне. Дочерние элементы, которые являются абсолютно позиционированными, по умолчанию не наследуют абсолютное позиционирование, поэтому дочерние элементы будут располагаться как обычно в пределах позиции: абсолютный компонент.

#window {
  position:  absolute;
}

В качестве примера макета Bootstrap с абсолютно позиционированным окном, в котором прокручиваются компоненты, рассмотрим:

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

У List Apart есть хороший обзор позиционирования CSS на http://www.alistapart.com/articles/css-positioning-101/