How to implement a web page that scales when the browser window is resized?
Solution 1
instead of using in css say "width: 200px", use stuff like "width: 50%"
This makes it use 50% of whatever it's in, so in the case of:
<body>
<div style="width:50%">
<!--some stuff-->
</div>
</body>
The div will now always take up half the window horizontaly.
Solution 2
Unless you have some specific requirement here I'm not sure why JS is needed here. Tabular layouts are the easy (and archaic) way to make fluid layouts in html, but div layouts with css allow for fluid layouts as well, see http://www.glish.com/css/2.asp
Solution 3
It really depends on the web page you are implementing. As a general rule you're going to want 100% CSS. When sizing elements that will contain text remember to gravitate towards text oriented sizes such as em, ex, and not px.
Floats are dangerous if you're new to CSS. I'm not new and they are still somewhat baffling to me. Avoid them where possible. Normally, you just need to modify the display property of the div or element you're working on anyway.
If you do all of this and scour the web where you have additional difficulties you'll not only have pages that resize when the browser does so, but also pages that can be zoomed in and out by resizing text. Basically, do it right and the design is unbreakable. I've seen it done on complex layouts but it is a lot of work, as much effort as programming the web page in certain instances.
I'm not sure who you're doing this site for (fun, profit, both) but I'd recommend you think long and hard about how you balance out the CSS purity with a few hacks here and there to help increase your efficiency. Does your web site have a business need to be 100% accessible? No? Then screw it. Do what you need to do to make your money first, then go hog wild with your passion and do anything extra you have time for.
Solution 4
Yep sound like you want to look at a fluid CSS layout. For resources on this, just google fluid CSS layout, should give you a whole lot of things to check. Also have a look at this previous question for some good pointers.
Solution 5
Something else to consider is that JavaScript won't update continuously while the window is being resized, so there will be a noticeable delay/choppiness. With a fluid CSS layout, screen elements will update almost instantly for a seamless transition.
Steven A. Lowe
Steven was the founder and CEO of Innovator LLC (nov8r.com) for almost a decade, providing innovative solutions for complex problems, until accepting a Principal Consultant position with ThoughtWorks in 2014, then migrating to Product Technology Manager at Google in 2018. Currently TBD at TravelJoy.com Steven is a software architect, developer, innovator, entrepreneur, author, and inventor with several decades of experience in many different languages and platforms across dozens of industries. He also writes technical, marketing, science fiction, and IT-career articles, and writes and plays music. Current projects include: a real book, "Head-First Domain-Driven Design", for O'Reilly Media [2020] science fiction software research, "Deep Learning for Software Development" (talk) - from the SATURN 2017 conference an alleged book, Object Mechanics, which is intended to be a practical how-to guide for object-oriented programming. Read or download OOP Explained in 90 Seconds.
Updated on July 23, 2022Comments
-
Steven A. Lowe almost 2 years
How to implement a web page that scales when the browser window is resized?
I can lay out the elements of the page using either a table or CSS float sections, but i want the display to rescale when the browser window is resized
i have a working solution using AJAX PRO and DIVs with overflow:auto and an onwindowresize hook, but it is cumbersome. Is there a better way?
thanks everyone for the answers so far, i intend to try them all (or at least most of them) and then choose the best solution as the answer to this thread
using CSS and percentages seems to work best, which is what I did in the original solution; using a visibility:hidden div set to 100% by 100% gives a way to measure the client area of the window [difficult in IE otherwise], and an onwindowresize javascript function lets the AJAXPRO methods kick in when the window is resized to redraw the layout-cell contents at the new resolution
EDIT: my apologies for not being completely clear; i needed a 'liquid layout' where the major elements ('panes') would scale as the browser window was resized. I found that i had to use an AJAX call to re-display the 'pane' contents after resizing, and keep overflow:auto turned on to avoid scrolling