好的，我有一个使用 Cordova 和 AngularJS 的移动应用程序。对于样式，我使用了 Less 和 Bootstrap。
问题
在移动应用程序中，我尝试使用百分比 (%) 调整 div 的大小。但这似乎不起作用。我似乎无法更改以下行为:div 与其中的内容一样大。这个问题听起来很简单，我已经在此处 (stackoverflow) 以及网络上尝试了很多选项。但是我还没有找到修复它的解决方案，而且它变得非常烦人。
我试过了
添加 html, body { height: 100% },
添加 html, body, #canvas { height: 100%}
添加 #canvas { min-height: 100% }
添加 html { height: 100% } body { min-height: 100% }
还有很多其他的变化。使用 px 可以，但我不知道我的移动设备有多大，所以这不是很方便..(我还使用 Bootstrap 和一些媒体查询来设置样式)。
示例
当我向我的 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 和正文)都是该元素的子项。添加 100% 使 div 空间跨度为屏幕的 100%，从而为百分比工作提供空间。
此答案归功于 Jai!
最佳答案
您是否尝试添加以下 css 并设置 Important 属性
html, body { height: 100% !important }
关于HTML，Body height 100% 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34158836/