如何让 div 内容在手机上占满整个屏幕？

Question

目前，我有一个正在为移动设备构建的项目。理想情况下，我希望 div 中的位在 iPhone 上占据整个屏幕。但是，问题在于调整大小后 div 的内容变小并且正文出现在下方。

我希望 div 的内容随着高度变大而不是变小而继续扩展。这里有一个link到什么它looks like currently

我希望内容占满整个页面。

这是我的体型：

  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;
}

这些是唯一的全局样式，div 中还没有样式。

Answer 1

试试下面的代码

1> 在head标签中添加viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

2> 将宽度和高度 100% 以及最小宽度和最小高度添加到 100%

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

Answer 2

将此行添加到您的 HTML header：<meta name="viewport" content="width=device-width, initial-scale=1.0">

并将宽度和高度设置为 100%，或者您可以将宽度设置为 100vw，将高度设置为 100vh。

Answer 3

使用 vw（可用屏幕总宽度）和 vh（可用屏幕总高度）并将其用作正文中的宽度和高度。

body {
  margin:0px;
  width:100vw;
  height:100vh;
  overflow:auto;
}

然后在 <head> 中添加视口元以正确缩放屏幕像素

<meta name="viewport" content="width=device-width, initial-scale=1">

如何让 div 内容在手机上占满整个屏幕？

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

html

css

flexbox

responsive