How to dynamically translate css elements?

user_16723427 0
Viewed 36

For a project I'm working on, I need to design a web application that has content that will can dynamically resize for phones, tablets, and desktop computers.

I haven't worked with any CSS in a while, and I need some help figuring out how I can achieve the following...

I need the top 65% of the screen to be one element/div, that contains content. For the bottom 35%, I need it to be another element/div, that contains other content.

What I need help with, is figuring out the CSS code that will allow me to keep the content spaced out in the proportions discussed above (top 65% centered, and bottom 35% centered), with an example of such shown below in the picture.

I'm especially having a hard time figuring out how to make a div take up a certain % of the screen, and any help would be appreciated a ton! Thanks!!

EXAMPLE IMAGE HERE:Example of resizing needs

The only thing is that the image shows a consistent screen height, but thats not always the case. This is why I think a percentage would be good, but if thats not the best way, I'm open to try something else!

reactjs responsive css
1 Answers

You can use vh which relative to the percent of the height of the viewport

  return (
    <div>
      <div style={{backgroundColor: "blue", height: '65vh'}}/>
      <div style={{backgroundColor: "red", height: '35vh'}}/>
    </div>
  );

or make the container the full height of window's innerHeight, and set the percentage to the content element.

  return (
    <div style={{height: `${window.innerHeight}px`}}>
      <div style={{backgroundColor: "blue", height: '65%'}}/>
      <div style={{backgroundColor: "red", height: '35%'}}/>
    </div>
  );
user_101542300
Related