émuler les dimensions de la fenêtre dans le navigateur

Question

Je travaille sur un éditeur WYSIWYG pour créer des mises en page réactives (via Bootstrap), en tant que projet parallèle. J'espère pouvoir le construire pour fonctionner avec une fonction de zoom/défilement (semblable aux visionneuses de pdf ou à Photoshop), et permettre à l'utilisateur de placer/changer les dimensions de la «fenêtre» le site est rendu dedans. Pour que l'éditeur WYSIWYG affiche correctement les mises en page, j'aimerais le placer dans un div et définir les dimensions du div à celles de la fenêtre du navigateur que j'emule. Est-ce possible hors de la boîte, en utilisant des dispositions de liquide? Sinon je peux éditer le JS pour chercher une div cible au lieu de la fenêtre afin de détecter les dimensions, mais je préférerais la méthode précédente.

Merci!

Answer 1

Vous pouvez utiliser le positionnement absolu css pour qu'un div occupe une partie définie de la fenêtre d'affichage des navigateurs, quel que soit le format html existant. Cela peut être fait en utilisant px pour compenser à partir des bords du navigateur ou des pourcentages pour une vue en pourcentage. Donc, compte tenu de votre exemple, vous pouvez définir une «fenêtre» et procéder à la mise en page dans cette fenêtre. Les enfants d'éléments qui sont positionnés de manière absolue n'héritent pas du positionnement absolu par défaut, de sorte que les éléments enfants seront disposés comme d'habitude dans la position: composant absolu.

#window { 
    position: absolute; 
} 

À titre d'exemple d'une mise en page Bootstrap avec une fenêtre en position absolue avec des composants en ce qui défilent, jetez un oeil à:

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

Une liste a plus un bon aperçu de css positionnement au http://www.alistapart.com/articles/css-positioning-101/