Question

我正在尝试创建一个适用于移动设备的简单单页网站。理想情况下，我希望网站的每个部分都是浏览器高度的100％。这是页面：

以及代码：

＆＃13;

body, html {
  height: 100%;
  width: 100%;
}

.section {
  height: 100%;
  position: relative;
}

.one, .three {
  background-color: #666;
}

.two {
  background-color: #222;
}

.bottom {
  position: absolute;
  bottom: 20px;
  right: 0px;
  left: 0px;
}

p {
  color: #fff;
  text-align: center;
}

.nav {
  position: fixed;
  top: 0px;
  height: 50px;
  width: 100%;
  background-color: #fff;
  z-index: 1;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="main.css">
</head>
<body>

<!--nav-->
<div class="nav"></div>

<!--Section1-->
<div class="section one">
<div class ="bottom"><p>By Juan Portillo</p></div>
</div>

<!--Section2-->
<div class="section two">

</div>

<!--Section3-->
<div class="section three">

</div>

</body>
</html>

＆＃13;

它在我的桌面上运行良好。但我在我的iPhone上尝试了它，第一部分占据了网页的整个高度，而不仅仅是浏览器的高度，所以它最终会隐藏＆＃34;其他部分。

我已经在堆栈溢出以及其他一些网站上进行了几次搜索，但我无法找到解决方法。任何帮助将不胜感激。

Answer 1

.section {
    height: 100vh;
}

使用vh。

将高度设置为视口高度

参考：https://snook.ca/archives/html_and_css/vm-vh-units

Answer 2

height: 100vh

应该做的伎俩

vh = viewport height

html，css - iPhone上单页网站的100％div高度

2 个答案: