What adjustments can I make to this code in order for it to occupy the entire height of the screen on any device it is displayed on?

I'm trying to figure out how to adjust this code so that it fills the entire height of any device screen it's displayed on. I want both rectangles to keep 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>

htmlcss

Answer №1

A great way to utilize relative units in CSS is by using viewport units. For example, setting height: 100vh; will make an element fill 100% of the viewport's height.

Answer №2

Utilize "relative units" that are based on proportions rather than fixed units. Examples of common relative units include percentages, ems, and viewport units. In the code snippet below, I have replaced specific units with 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The execution of jQuery was hindered due to the implementation of PHP include

Having an issue with jQuery not working in index.php when including the file header.php. The nav sidebar is included, but clicking the chevron does not trigger anything. It only works when I directly include header_user.php without checking the UserType in ...

javascriptphpjqueryhtmltwitter-bootstrap

When additional elements follow, the button ceases to function properly in JavaScript

I am working on creating a text-based idle game that involves multiple buttons and text around them. However, I have encountered an issue where the functionality stops working when I try to add text after the "Work" button. The callback function is no lon ...

javascripthtmlbutton

How can I simulate or manipulate the element's scrollHeight and clientHeight in testing scenarios?

In my JavaScript code, I have a function that checks if an HTML paragraph element, 'el', is a certain size by comparing its scrollHeight and clientHeight properties: function isOverflow(element: string): boolean { const el = document.getEleme ...

javascripthtmltypescriptjestjsmocking

Applying Regular Expressions in Java to "convert" a CSS style into an HTML tag style

In my Java code, I have a String variable that contains HTML code like this: <span style="text-decoration: underline;">test</span> My goal is to convert it to look like this: <u>test</u> If the HTML code is like this: <span ...

javahtmlcssregex

Steps for repairing a button positioned at the top of a nested container within a form

My search form includes side filters to help users narrow down their search, with the results appearing on the right. This is just a basic example, as my actual setup involves more filters. However, there is one issue – users have to scroll down the pag ...

htmlcsstwitter-bootstrapbootstrap-4

What is the process for including or excluding a class from a horizontal scrollbar?

I've been trying to implement a back to top button on a horizontally scrolling page. However, I'm encountering difficulties in adding or removing the necessary class to show or hide the button. Here's the JavaScript code I'm using: $( ...

javascriptjqueryhtmlcsshorizontal-scrolling

Radio buttons are not having the :invalid pseudo class properly applied

Looking to style a radio group with a required attribute. Attempting to adjust the appearance of the radio group depending on whether an input is selected or not. However, it appears that the :invalid pseudo-class does not apply to radio buttons. ...

csshtmlradio-button

Using Google Analytics to monitor open rates and click-through rates of emails

After carefully reviewing the document, I noticed a unique track code that should be able to assist me. However, I am unsure about how to effectively utilize it in order to obtain the open rates and URL click rates. Regarding open rates: I am currently us ...

phphtmlgoogle-analyticsswiftmailer

Error: A DATA_CLONE_ERR exception with code 25 was thrown by a web worker

Need help with my web worker: var arrayit = function(obj) { return Array.prototype.slice.call(obj); }; work = arrayit(images); console.log(work); //work = images.push.apply( images, array ); // Method : "load+scroll" var worker = new Worker('jail_w ...

javascriptjqueryhtmldomweb-worker

Using Python with Selenium, automate the process of clicking on each list item within

Hey there! I recently implemented the code below, and it worked perfectly. However, I'm now trying to figure out how to make it click on all the li items within a ul that have an empty class attribute. Any ideas on how to do this using Xpath? Xpath: ...

htmlpython-2.7python-3.xselenium-webdriveriteration

Why is it that only one of these .php functions is functional?

I'm having some trouble getting my PHP results to display in an HTML table. The first part of my code successfully retrieves the data I need, so I believe the issue lies in the second section where I attempt to format it into a table. Below is the sni ...

phphtml

The background positioning feature is experiencing some technical issues

Using Jekyll, I have code where the inline background-position changes based on the front-matter position I define: * { box-sizing: border-box; } body{ padding: 0; margin: 0; } .page__hero--overlay { position: relative; margin-bottom: 2em; ...

htmlcsssassjekyll

the content outside of the division is incorrectly formatted

Here is the code snippet that I am working with: <html lang='es'> <head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.mi ...

htmlcss

Is it appropriate to incorporate the new <main> element in HTML5 yet?

Back on the 16th of December, a new HTML5 extension specification was sent off to the W3C for review. This extension focuses on the <main> element and you can check it out here. Here's a summary: This particular spec builds upon the existing HT ...

htmlsemantic-markupspecifications

Flexbox properties are being ignored by input fields

Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as ...

htmlcss

Words curl around the far-off entity

Challenge I'm currently working on a project where I need to place an interactive info box next to other elements in the DOM. However, I've encountered an issue with text from one paragraph wrapping around the text in a separate div, even though ...

htmlcss

What is the best way to eliminate products that have already been utilized?

Take a look at my code snippet. $(function() { $("#tags input").on({ focusout: function() { var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // only allow certain characters if (txt) $("<span/& ...

javascriptjqueryhtmlcssautocomplete

The link button became unresponsive as soon as I implemented CSS changes

I customized one of my buttons with special styling, and now I'm facing an issue where the button is clickable but it fails to direct me to the intended link (which should open a YouTube video in a new tab). #help { background-color: cornflowerbl ...

htmlcssbuttonhyperlinkyoutube

Choose the tag and class then retrieve the custom attribute

I'm currently attempting to retrieve a specialized attribute utilizing jquery and subsequently choose it, nevertheless I am encountering some difficulties with the process Below is the jquery code I have implemented to access the value var stockId = ...

javascriptjqueryhtml

Is it possible to retrieve stored colors from the Back End and incorporate them into an SCSS file?

Currently, I am in the process of restructuring my code to make it more clear and easier to maintain. I have a concept in mind, but I am struggling with how to implement it effectively. To enhance cleanliness and efficiency, I plan to create a separate _co ...

cssreactjssassless