Question

我有一个网站，其中最小宽度设置为767px，直到我可以开始制作纯粹的移动版本。

然而，当它被夹入以查看整个767宽度时，高度不符合100％。它似乎保持在缩小到1时设置的任何高度。

以下是截图：

它适用于风景，但不适用于人像。

我该如何解决这个问题？

编辑：这是一个完整的HTML，显示问题......

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />

    <style>
        html, body {
            width: 100%;
            min-width: 100%;
            height: 100%;
            min-height: 100%;
            height: 100vh;
            min-height: 100vh;
            background: red;
            padding: 0;
            margin: 0;
        }

        #navbar {
            background: blue;
            min-width: 767px;
        }
    </style>
</head>
<body>
    <div id="navbar">Test</div>
    <div ng-view id="mainBody">Test</div>
</body>
</html>

Answer 1

为视口添加元标记

<meta name="viewport" content="height=device-height, initial-scale=1.0" />

你可以使用vh单位获得全高：

#mydiv {
   display:block;
   height:100vh;
}

在w3schools

上查看来自css3的单位

如何让我的iPhone浏览器达到高度：100％？

1 个答案: