Html Main将不会设置为100%高度-包括Codepen

问题背景：

我正在查看滑动菜单面板，并使用以下代码笔显示：

问题：

组件应用了

滑动面板

样式，如下所示：

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

在移动视图中，

组件未设置为100%的高度，这将使用红色背景色显示，如图所示：

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

我无法理解为什么100%的样式不适合移动视图的整个高度？

注：我将在AngularJS项目中使用它，因此我有两个div将包装所有内容，它们的名称如下：

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

为什么移动视图中的高度不会设置为100%高度？

现在

#main

高度与

宽度

值相同。在

#main

上更改为：

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

它会解决你的问题<代码>最小高度或仅

高度

vh

表示视口高度，因此它将覆盖所有视图。

现在

#main

高度与

宽度

值相同。在

#main

上更改为：

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

---

它会解决你的问题<代码>最小高度或仅

高度

vh

表示视口高度，因此它将覆盖所有视图。

使用mobile时，最好使用

vh

，这是视口高度，

vw

，这是视口宽度

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

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

#主{
背景色：#ff0000；
最小高度：100vh；//vh=视口高度

使用移动设备时，最好使用

vh

，这是视口高度，

vw

，这是视口宽度

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

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

#主{
背景色：#ff0000；
最小高度：100vh；//vh=视口高度

尝试

高度：100vh！重要；

vmin

相对于最小侧。尝试

高度：100vh！重要；

vmin

相对于最小侧。