I have a page with a small game on, the UI of which I have designed to work with a viewport with a resolution of 1280x800 (or thereabouts). I'd like to maintain this look on differently sized screens, allowing the page to occupy 100% of the viewport width and have the height adjust accordingly. In effect resizing the entire page as you would when using in an image editor.
Initially I approached this by surrounding all of the elements within the <body> tag with <div id = "wrapper"> and setting width:100%; but, this page has a number of elements set to position:absolute; meaning that while the rest of the page was resized accordingly, those elements remained in place. This also had the effect of not altering the size of some elements whose sizes were set in px as opposed to % or ems.
<body>
<div id = 'wrapper'>
<content></content>
</div>
</body>
#wrapper {
width:100%;
}
My next approach was to embed the page in another page entirely with an <iframe> element and wrap that in a div but the contents of the <iframe> simply spilled spilled over, and you would have had to scroll to see the page.
<body>
<div id = 'wrapper'>
<iframe src = 'game.html' width = '1280' height = '800'></iframe>
</div>
</body>
#wrapper {
width:100%;
}
How can I achieve this? Ideally using just CSS and HTML but I don't mind all that much.
Aucun commentaire:
Enregistrer un commentaire