Resizing Page Elements based on Window size

javascript jquery css resize dimensions

11,894

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).

11,894

Author by

OrangeRind

What about me? Nothing really. Regular guy. Bit of brain. Lots of interests.

Updated on June 04, 2022

Comments

OrangeRind about 2 years

Problem: My Client wants me to create a launch webpage for his product such that there should be no scroll on the page, be any browser or window dimensions.

Doubt: Is this possible using CSS and Javascript?

Some Early Diagnosis: This might be a little similar to this or this but the difference is that I want to resize the dimensions of each and every element in a particular ratio and not just adjust the height of a parent DIV.

So, the statement: I need to change the dimensions of each and every element (images, divs, text ... all) based on a ratio between the (current window size and a reference window size). Perhaps Javascript might have a cure for this?

Question: How to do this?