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 有效，但我不知道我的移动设备有多大，所以这不太方便..（我还使用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表格的标准链接，等等。所有其他页面都包含在＆＃39; ng-view ＆＃39;并且没有任何或标记。这是因为它们包括在内。

解决方案

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

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

这很有效，因为所有div（除了html＆amp; 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%;
}

Answer 3

这很可能是因为在CSS中100％是相对值。

对于宽度，默认的100％是屏幕的宽度，或者您正在查看的任何内容。

但是，高度不会将屏幕的高度设为100％。它需要一个坚实的价值。

我认为如果你改变了

Public Sub compare_list()
Dim wsList2 As Worksheet
Dim wsList1 As Worksheet
Dim wsCompare As Worksheet
Dim found1 As Range

Set wsList2 = Worksheets("List2")
Set wsList1 = Worksheets("List1")
Set wsCompare = Worksheets("Compare")

Application.ScreenUpdating = False

'Check each value in client_id list one with list two
wsList1.Activate
wsList1.Range("a1").Select

Do Until ActiveCell.Value = ""

Set found1 = wsList2.Range("a1",_
wsList2.Range("A1048576").End(xlUp)).Find(Selection.Value)
    If found1 Is Nothing Then
    Selection.Copy
    wsCompare.Range("A1048576").End(xlUp).Offset(1, 0).PasteSpecial
    End If

ActiveCell.Offset(1, 0).Select
Loop

'Check each value in client_id list two with list one
wsList2.Activate
wsList2.Range("a1").Select

Do Until ActiveCell.Value = ""

Set found1 = wsList1.Range("a1",_
wsList1.Range("A1048576").End(xlUp)).Find(Selection.Value)
        If found1 Is Nothing Then
        Selection.Copy
        wsCompare.Range("B1048576").End(xlUp).Offset(1, 0).PasteSpecial
        End If

    ActiveCell.Offset(1, 0).Select 
Loop

wsCompare.Activate
Application.ScreenUpdating = True

End Sub

与

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

它应该有用。

100vh应该将html的高度设置为视口的高度。

我想这种方式有效，但我必须说，我自己还没有使用某些东西让我的页面的高度达到屏幕的100％。

Answer 4

是的，呈现HTML！

shapeless.Data只会扩展到需要的范围。我相信你的修复应该是让元素的高度为70％（因为它将相对于整个页面），然后incidentContainer应该有100％的高度。

百分比高度是相对于父元素而不是根元素，因此您需要非常了解任何容器，甚至是框架隐藏添加的容器。

此外，如果有帮助，Jelmergu建议使用implicit def seqData[P, T, R](implicit qt: Lazy[shapeless.poly.Case1.Aux[P, T, R]]): Data[P, Seq[T], R] = new Data[P, Seq[T], R] { def gmapQ(t: Seq[T]) = t.map(qt.value(_)).toList }单位类型。这可能适合您的使用案例 - 一个＆＃34;视口高度＆＃34;相当于浏览器内容区域＆＃34; 1％＃34;。所以，100vh将占据整个屏幕。即使是在深层次的孩子身上也是如此。

HTML，身高100％不起作用

4 个答案: