ansaurus

Question

Resizing Page Elements based on Window size

Answer 1

+1 A:

Just set the height and width of <html> and <body> to 100%, overflow to hidden and use percentages for left, top, width and height of elements:

<!DOCTYPE html>
<html>
<head>
  <meta charset=UTF-8>
  <title>Proportional resizing</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    div {
      position: absolute;
      left: 30%;
      top: 20%;
      width: 40%;
      height: 30%;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div>divthing</div>
</body>
</html>

These percentages are relative to the containing block, which is, in this case <body>.

Update: To answer another question: scaling of background images is almost not supported yet. When the CSS 3 background-size property gains ground (see this table), things will be easier. For now, have a look at this answer (yes, that means: more markup).

Marcel Korpel 2010-06-22 22:13:17

thats surely possibble, but would it take care that I want to display the background of the DIV as a whole? coz, on small window, background would be cutoff, and large window it would repeat... :)

OrangeRind 2010-06-22 22:22:26

Also, since I have CSS-ified most of the page, before this special request from my client dropped in, so i was hoping if there existed a solution which would not make me change the CSS again. ;) ;)

OrangeRind 2010-06-22 22:23:30

@Orange – You mean, you want the background to be scaled to the whole size of the `div`?

Marcel Korpel 2010-06-22 22:23:52

@Orange – Regarding your second remark: no, you *almost* can't do this without changing your CSS and perhaps your HTML structure, too. This kind of presentational things are closely related to the markup and CSS. The only way of doing this without changing your HTML or at least your CSS, is indeed using JavaScript. But you really, really don't want to do this that way, you shouldn't hassle around with the positions of all elements in JavaScript (and JavaScript may be turned off or blocked in your visitor's browser).

Marcel Korpel 2010-06-22 22:27:18

@marcel yeah, scaling is needed. :'( . . . Although a JS solution could also help even though I can try spending time for readjustment in CSS, its just that time is short. :)

OrangeRind 2010-06-22 22:43:16

@Orange – Though I understand your position and you'll not always be able to improve things, consider this: “before this special request from my client dropped in” and “time is short”. As it is a ‘special request’, seemingly not known when you both made decisions about the site, you have a good ground to ask more time to redesign it.

Marcel Korpel 2010-06-22 22:48:26

@marcel ah.. surely. ;) although that updated link in the answer is good too. Thanks a lot btw for all of this. :)

OrangeRind 2010-06-23 10:29:19

ansaurus

tags:

views:

answers:

Resizing Page Elements based on Window size

related questions