HTML,身高100%不起作用

Question

HTML,身高100%不起作用

Mr.*_*guy 15 html css angularjs cordova twitter-bootstrap-3

好的,我有一个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工作,但我不知道我的移动设备有多大,所以这不是真正的方便..(我也使用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;
}

Run Code Online (Sandbox Code Playgroud)

额外的信息

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

当然还有我的CSS表的标准链接,等等.所有其他页面都包含在' ng-view '中,并且没有任何页面要么标签.这是因为它们包括在内.

解

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