如何让 div 内容在手机上占据整个屏幕？ [复制]答案

【问题标题】：How to make div contents take up entire screen on mobile? [duplicate]如何让 div 内容在手机上占据整个屏幕？ [复制]
【发布时间】：2021-09-28 11:32:53
【问题描述】：

目前，我正在为移动设备构建一个项目。理想情况下，我希望 div 中的位占据 iPhone 上的整个屏幕。然而，问题是当它被调整大小时，div 的内容变得更小，并且 body 出现在下面。

我希望 div 的内容随着高度变大而不是变小而继续扩展。这是它的链接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 中还没有样式。

【问题讨论】：

你有没有试过把高度和宽度设置为100vh和100vw
是的，它就是这么做的imgur.com/a/aJnm8hB
您是否为项目设置了视口？
你能制作一个重现你的问题的片段吗？
没有代码很难确定问题

标签： html css flexbox responsive

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

试试下面的代码

1>在head标签中添加视口

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

【讨论】：

您需要将高度设为 100vh 给父元素，然后在您的情况下只有高度 100% 有效，因为默认情况下父元素的高度是自动的