Question

问题背景：

我正在查看滑动菜单面板并使用以下codepen来显示：

问题：

<main>组件应用了slide-panel样式，如下所示：

#main {
    background: red;
    height: 100vmin!important;
}

在移动视图中，<main>组件未设置为100％的高度，使用红色背景颜色显示，如下所示：

此高度问题意味着当面板关闭时，可以看到基础菜单如下所示：

我无法弄清楚为什么100％的样式不适合移动视图的整个高度？

注意我将在AngularJS项目中使用它，因此我有两个Divs将包装所有内容，这些内容的命名如下：

<div id="ui-view">
<div id"ResultsController">

为什么移动视图中的高度未设置为100％高度？

Answer 1

现在#main高度与width值相同。在#main更改为：

#main {
  background: red;
  min-height: 100vh;
}

它会解决您的问题。 min-height或height。 vh表示视口高度，因此它将覆盖所有视图。

Answer 2

使用移动设备时，最好使用vh（视口高度）和vw（视口宽度）。

对于您的元素，您需要执行以下操作：

#main { background-color: #ff0000; min-height: 100vh; // vh = viewport height