Home/ Questions/Q 874639
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T11:08:12+00:00

Problem: My Client wants me to create a launch webpage for his product such

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0