How to make div contents take up entire screen on mobile?

Currently, I have a project I am building for mobile. Ideally, I would like for the bit in the div to take up the entire screen on say an iPhone. However, the issue is as it is resized the contents of the div become smaller and the body appears below.

I want the contents of the div to continue to expand with the height becoming greater instead of becoming smaller. Here is a link to what it looks like currently

I would like for that bit with the content to take up the entire page.

Here are my body styles:

  font-family: Nunito Sans;
  background-color: #F1F1F1;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  width:375px;
  height: 200px;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  position: absolute;
}

Those are the only global styles and there is no styling in the div yet.



Read more here: https://stackoverflow.com/questions/68463601/how-to-make-div-contents-take-up-entire-screen-on-mobile

Content Attribution

This content was originally published by Ben Smith at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: