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

Question

问题背景:

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

http://codepen.io/daveharris/pen/pEvEad

问题:

<main>组件有一个 slide-panel应用于它的样式如下:

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

在移动端查看 <main>组件未设置为 100% 的高度，这是使用红色背景色显示的，如下所示:

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

我不明白为什么 100% 的样式不适合移动 View 的整个高度？

请注意，我将在 AngularJS 元素中使用它，因此我有两个将包装所有内容的 Div，它们的名称如下:

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

为什么手机 View 中的高度不会设置为100%高度？

Answer 1

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

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

它将解决您的问题。 最小高度 或只是高度。 vh 表示视口(viewport)高度，因此它将覆盖所有 View 。