How can I make this section full height of the screen?-CodePudding

I am hoping this can be done by only setting the height for the parent container and leaving the rectangles as they are relative to the parent container. I don't mean modifying the size of the individual rectangle components, I mean making the entire container fit screen height. Thanks --------------------------------------------------------------------------------

'''

<html>
<head>
<style>
.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;
}
</style>
</head>
   <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>
</html>

'''

CodePudding user response：

Add .container-center-horizontal {height: 100vh}

CodePudding user response：

this section

Not sure which element you mean -

Typically, the CSS to set an element to the viewport height is

height: 100vh;

Meaning '100% of the viewport height'.

CodePudding user response：

Set height:100vh for the parent container and set height: 100% for the purple rectangle. Set height in % for the red rectangle and set it in center by setting top:50%, left:50%, transform:translate(-50%,-50%). By this way you can achieve responsive box

<html>
<head>
<style>
  *{box-sizing: border-box;}
.screen a {
  display: contents;
  text-decoration: none;
}

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

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

* {
  box-sizing: border-box;
}
.ray106 {
  background-color: #ffffff;
  height: 100%;
  width: 360px;
}

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

.ray106 .rectangle-2 {
  background-color: #f61a1a;
  border: 1px solid #707070;
  height: 92%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
  width: 292px;
}
</style>
</head>
   <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>
</html>