gpt4 book ai didi

HTML,Body height 100% 不起作用

转载 作者:技术小花猫 更新时间:2023-10-29 12:21:04 26 4
gpt4 key购买 nike

好的,我有一个使用 CordovaAngularJS 的移动应用程序。对于样式,我使用了 LessBootstrap


问题

在移动应用程序中,我尝试使用百分比 (%) 调整 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 添加元素时,我得到以下行为:

HTML

我想删除那个空白区域,但我只能在使用 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com