What is the best way to adjust viewport settings for child components, ensuring the container size is set to 100vw/100vh for all children

Within my project, I have connected the react-static repository with the react repository using yarn link.

"react": "^16.13.1"
"react-static": "^6.0.18"

I am importing various components from the react-static repository to use in the react repository. My goal is to utilize vw/vh units in the react-static components so that they appear as described below in the react project.

The challenge lies in making a div occupy 100% width and 100% height of the viewport for its children elements. I aim to achieve this in the following manner:

<div className="wrapper">
<div className="inner"></div>
</div>

The inner div (imported from react-static) should have width: 100vw; height: 100vh;. For instance - if I specify the wrapper size (react container) as width: 400px; height: 200px; (while the window size is 1920x1080), I expect the inner container's viewport to adjust accordingly to match the wrapper size - resulting in width: 400px; height: 400px; while still behaving as if the wrapper encompasses the entire window for it.

Thus far, the only solution I have come across involves manually calculating sizes for elements within the inner container. Do you have any suggestions?

javascripthtmlcssreactjsviewport-units

Answer №1

If you set a child to a percentage height, it will calculate that percentage based on its parent div's height. However, there are some quirks with using height as a percentage - the parent div must have a specified height for it to work properly (using height:auto will always result in 0). For more detailed explanation, check out the second answer in this thread.

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

Using HTML to retrieve data from a PHP/MySQL database

This issue has been consuming my thoughts lately. I have a CSS-styled HTML page and a PHP page that retrieves the latest record from a MySQL database. The challenge is to display this information in the "leftContent" div of the HTML page. The PHP script & ...

phphtmlmysql

Velocity.js causing a slowdown in animated performance

Currently, I am attempting to animate spans, and while the animation is functional, it appears to be somewhat choppy and lacks smoothness. https://codepen.io/pokepim/pen/JBRoay My assumption is that this is due to my use of left/right for animation purpos ...

javascriptcssvelocity.js

Statement after post is not yielding any result

Below is a javascript function that I'm struggling with: function loginsubmit() { var url = "../php/loginsubmit.php"; var data = ""; ajaxRequest(url, "POST",data , true, insertNewBody); } This function is responsible for sending an ajax ...

javascriptphpajax

Having trouble with submitting the second stage of a multi-step form through Ajax technology

I'm currently tackling a multi-step form project using JavaScript, specifically focusing on submitting the second step of the form via Ajax. I've taken the initiative to create a distinct JavaScript file titled ajaxRequest.js to manage the Ajax r ...

javascriptphpjqueryajaxlaravel

Tips for displaying the date in 13-digit Unix Timestamp format using JSpreadSheet

I am faced with a challenge involving data that is stored in Unix Timestamp format, which I need to display as a readable date (e.g. YYYY/MM/DD) in JSpreadSheet ("jspreadsheet-ce"). Currently, the data appears as a 13-digit number and looks unattractive. ...

javascriptvue.jsunix-timestamp

What makes it impossible to use var instead of let in ngFor?

My understanding is that in JavaScript, we typically use var and let for variable declarations. The main difference between the two is that var is scoped to the current function, while let is scoped to the current block. Therefore, theoretically I should b ...

javascriptangularvarlet

Is there a way to retrieve all elements with a specific attribute in GraphQL?

I have a file named countryData.json containing some JSON data structured like this: { "info":"success", "stats": [{ "id":"1", "name":"USA", "type":"WEST" }, //... Utilizing graphQL to retrieve this data, I've defined an object type fo ...

reactjsexpressgraphqlexpress-graphql

Designing an intricate layout with the help of Bootstrap-Vue

After exploring the Vue-Bootstrap panel in my previous question, I implemented the following code snippet to generate a panel: <b-card no-body class="mb-1"> <b-card-header header-tag="header" class="p-1" role="tab"> <b-button b ...

javascriptbootstrap-4vuejs2bootstrap-vue

Unable to transfer a value from a CGI script back to an HTML form

When working with an HTML form that has a date field named cdt, I encountered the need to retain the date value when submitting data to an Oracle table through a CGI script. To achieve this, instead of using Javascript code like history.go(-1), I aimed to ...

javascripthtml

Jesting around with mocking console.error leads to test failures

The Issue: Currently, I am working on testing React components using Jest and Enzyme. In order to check for properties in development, I have incorporated the prop-types module. The prop-types module relies on console.error to alert when mandatory props a ...

javascriptreactjsjestjsenzyme

Rearrange the sequence of specific child elements within the Div

Is there a way to reverse the order of specific div's children elements using just CSS? For instance: I need <div id="parent"> <a>A</a> <a>B</a> <a>C</a> <a>D</a> &l ...

htmljquerycsstwitter-bootstrapbootstrap-4

Protruding button on the surface of the form

I'm struggling with a form layout issue. Here's what it looks like: https://i.sstatic.net/arfJQ.png Removing the mb-3 class doesn't solve the problem, it just removes the spaces between the inputs. How can I make sure the button remains in ...

htmlcsscss-floatbootstrap-5clearfix

How Should One Properly Describe an Object with Multiple Dimensions?

PHP features multidimensional arrays, meaning an array that contains multiple arrays within it. When working with JavaScript, how does one refer to an object that holds multiple objects? Is it called a multidimensional object or is there a different termi ...

javascriptjsonterminology

How to download a dynamically generated PHP file to your local machine

I am trying to find a solution where the search results can be downloaded by the user and saved on their computer. Currently, the file is automatically stored on the server without giving the user an option to choose where to save it. In the search form, ...

phpjavascriptjquerydownload

Adjusting the sidebarPanel height to match the mainPanel content in a shiny app

I'm currently developing an app that features a scrollable sidebarPanel alongside a mainPanel that can have varying heights, such as: library(shiny) ui <- fluidPage( headerPanel('Iris k-means clustering'), sidebarPanel(style = " ...

cssrshiny

Tips for aligning three cards in a row using Bootstrap-5

In my Django template for loop, I am trying to display the first three cards from the database on the same line. Currently, only two of them are staying on the same line and I want all three cards to be aligned horizontally. <div class="row"&g ...

pythonhtmlcssdjangobootstrap-5

The phenomenon of componentDidMount being triggered before the DOM is fully mounted arises when utilizing createPortal in React

I have written a React code snippet that looks like this: import React from 'react'; import ReactDOM from 'react-dom'; import ComponentB from './ComponentB'; class ComponentA extends React.Component { constructor(props) ...

javascriptreactjs

Looking for a reliable tool to check your CSS classes and tidy up your code effectively?

It seems like a common issue with a straightforward solution. I have numerous CSS selectors scattered across various files, many of which may be unnecessary and a directory full of HTML files. My goal is to identify all redundant selectors in my CSS within ...

css

Select the object attribute to use as a value in MUI 5 Autocomplete

Here are the available options: const choices = [ { "Type": "Option A" }, { "Type": "Option B" } ] Implementation: const [selectedOption, setSelectedOption] = useState(''); <Autocomplet ...

reactjsmaterial-ui

Encountering an unusual issue: Unable to access undefined properties (specifically 'get')

I'm struggling to get the order history screen to display the order history of a specific user. Every time I navigate to the path, I encounter the error mentioned in the title. I double-checked the path for accuracy and made sure there are no spelling ...

javascriptreactjsexpress