HTML，正文高度 100% 不起作用

Question

好的，我有一个带有 Cordova 和 AngularJS 的移动应用程序。对于样式，我使用 Less 和 Bootstrap。

---

问题

在移动应用程序中，我尝试使用百分比 (%) 调整 div 的大小。但这似乎不起作用。我似乎无法改变以下行为：The divs are as big as the content inside of them。这个问题听起来很简单，我在这里（stackoverflow）和网络上尝试了很多选项。然而我还没有找到解决它的方法，而且它变得非常烦人。

---

我试过了

添加html, body { height: 100% }，

添加html, body, #canvas { height: 100%}

添加#canvas { min-height: 100% }

添加html { height: 100% } body { min-height: 100% }

还有很多其他的变化。使用 px 可行，但我不知道我的移动设备有多大，所以这不是很方便..（我还使用引导程序和一些媒体查询来设置样式）。

---

示例

当我向我的 div 添加元素时，我得到以下行为：

我想删除那个空白区域，但我只能在使用 px 而不是 % 时实现。

---

较少的例子：

html, body {
    background: transparent;
    height: 100%;
    margin: 0;
    padding: 0;    
}

#canvas {
    min-height: 100%;
}

body {
    -webkit-touch-callout: none;                 //prevent callout to copy image, etc when tap to hold 
    -webkit-text-size-adjust: none;              //prevent webkit from resizing text to fit 
    -webkit-user-select: node;                   //prevent copy paste, to allow, change 'none' to 'text'  
    min-height: 100%;
    margin: 0;
    padding: 0; 
    background-color: @cgiColor;  
}

.header {
    top: 0px;
    width: 100%;
    height: 5%;
    background: @companyColor;
    color: @textColor;
}

.incidentContainer {
    background: @appBodyColor;
    width: 100%;
    height: 70%;
}

.footer {
    position: absolute;
    color: @textColor;
    bottom: 0px;
    height: 15%;
    width: 100%;    
    background: @companyColor;
}

---

额外信息

我正在使用 AngularJS，所以我的应用程序是单页应用程序。我的 index.html 如下所示：

<body oncontextmenu="return false" >  
   <div class="{{ pageClass}}"  ng-view ></div>        
   <script type="text/javascript" src="cordova.js"></script>
   <script data-main="main" src="lib/require.js"></script>
</body>

当然还有指向我的 CSS 表的标准链接，等等。 所有其他页面都包含在“ng-view”中，并且没有任何 或 标记。这是因为它们被包括在内。

---

解决方案

解决方案是添加以下 CSS 规则：

div[ng-view]{
     height: 100%;
}

这行得通，因为所有 div（除了 html 和 body）都是该项目的子项。添加 100% 使 div 空间跨度到屏幕的 100%，从而为百分比工作提供了空间。

此答案归功于 Jai！

Answer 1

你有没有尝试添加以下css并设置重要属性

html, body { height: 100% !important }

Answer 2

在我看来，指令ng-view 是您的应用程序的父级，header, content, footer 已加载到此 div 中。所以你有你的header div 在正确的位置，你的页脚也被正确放置，因为它是绝对定位的。

但对于您的内容区域，这与 ng-view div 相关。

我建议您将其设为100% 高度。类似的东西：

div[ng-view]{
     height: 100%;
}