How can I modify this code so that it is full height of whatever device screen it is viewed on?-CodePudding

How can I modify this code so that it is full height of whatever device screen it is viewed on? I would like to make it so both rectangles maintain their relative proportions.

.screen a {
  display: contents;
  text-decoration: none;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.container-center-horizontal>* {
  flex-shrink: 0;
  pointer-events: auto;
}

* {
  box-sizing: border-box;
}

.ray106 {
  background-color: #ffffff;
  height: 740px;
  width: 360px;
}

.ray106 .component-1-1 {
  background-color: #463af2;
  border: 1px solid #707070;
  height: 740px;
}

.ray106 .rectangle-2 {
  background-color: #f61a1a;
  border: 1px solid #707070;
  height: 677px;
  left: 33px;
  position: relative;
  top: 31px;
  width: 292px;
}

<body style="margin: 0; background: #ffffff">
  <input type="hidden" id="anPageName" name="page" value="ray106" />
  <div class="container-center-horizontal">
    <div class="ray106 screen">
      <div class="component-1-1">
        <div class="rectangle-2"></div>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

You can use relative to viewport units: height: 100vh; what means 100% of viewport height.

CodePudding user response：

Use "relative units" that refer to a proportion rather than a specific, finite unit. Percentages, ems or viewport units would be some common examples. Below I've swapped in viewport units:

.screen a {
  display: contents;
  text-decoration: none;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.container-center-horizontal>* {
  flex-shrink: 0;
  pointer-events: auto;
}

* {
  box-sizing: border-box;
}

.ray106 {
  background-color: #ffffff;
  height: 100vh; /* 740px */
  width: 48.6486486486vh; /* 360px / 740px */
}

.ray106 .component-1-1 {
  background-color: #463af2;
  border: 1px solid #707070;
  height: 100vh; /* 740px */
}

.ray106 .rectangle-2 {
  background-color: #f61a1a;
  border: 1px solid #707070;
  height: 91.4864864865vh; /* 677 / 740 */
  left: 4.4594594595vh;
  position: relative;
  top: 4.1891891892vh;
  width: 39.4594594595vh; /*292 / 740 */
}

<body style="margin: 0; background: #ffffff">
  <input type="hidden" id="anPageName" name="page" value="ray106" />
  <div class="container-center-horizontal">
    <div class="ray106 screen">
      <div class="component-1-1">
        <div class="rectangle-2"></div>
      </div>
    </div>
  </div>
</body>