HTML，正文高度 100% 不起作用
Posted
技术标签:
【中文标题】HTML，正文高度 100% 不起作用【英文标题】：HTML, Body height 100% does not work 【发布时间】：2016-03-13 13:07:51 【问题描述】：好的，我有一个带有 Cordova 和 AngularJS 的移动应用程序。对于样式，我使用 Less 和 Bootstrap。
问题
在移动应用程序中，我尝试使用百分比 (%) 调整 div 的大小。但这似乎不起作用。我似乎无法改变以下行为：The divs are as big as the content inside of them。这个问题听起来很简单，我在这里（***）和网络上尝试了很多选项。然而我还没有找到解决它的方法，而且它变得非常烦人。
我试过了
添加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！
【问题讨论】：
我们需要查看呈现的 HTML 结构。 @steveax，添加了渲染的 HTML 结构 @Mr.wiseguy 您指的是“额外信息”部分吗？看起来 Angular 渲染了页面加载后的内容。也许您可以在加载的页面上打开开发人员工具，右键单击 ，然后单击编辑 HTML，然后将其复制出来？这是一个样式问题，所以我们只真正关心 HTML 最终的外观。您可以删除您认为不相关的内部级别部分（只需写“大量内容”或其他内容） 仍然看不到任何渲染的html，如果您的html是由角度生成的，那么您需要检查元素并从那里粘贴html 【参考方案1】：你有没有尝试添加以下css并设置重要属性
html, body height: 100% !important
【讨论】：
【参考方案2】：在我看来，指令ng-view 是您的应用程序的父级，header, content, footer 已加载到此 div 中。所以你有你的header div 在正确的位置，你的页脚也被正确放置，因为它是绝对定位的。
但对于您的内容区域，这与 ng-view div 相关。
我建议您将其设为100% 高度。类似的东西：
div[ng-view]
height: 100%;
【讨论】：
我们可能需要渲染 HTML 来确认，但这听起来很恰当。具体来说，将ng-view 的高度设为employeeContainer 的70%，然后将employeeContainer 设为100% 的高度（前一个元素的）。任何其他中间容器都需要 100%。
绝对！呈现的标记将使问题变得清晰易懂。 @Katana314
你能给我更多关于“div.pageclass”的信息吗？不知何故，'pageclass' 在运行时转换为 。所以我不知道我应该在哪里添加那段css。 （另外，我在帖子中添加了渲染的 HTML 代码）
@Mr.wiseguy 检查更新。您可以使用ng-view 属性定位它。
它就像一个魅力！非常感谢。这个问题困扰了我很久..【参考方案3】：
这很可能是因为在 CSS 中 100% 是一个相对值。
对于宽度，默认 100% 是屏幕的宽度，或者您正在查看的任何内容。
Height 但是不将屏幕高度设为 100%。它需要一个坚实的价值。
我认为如果你改变了
html, body
background: transparent;
height: 100%;
margin: 0;
padding: 0;
与
html, body
background: transparent;
height: 100vh;
margin: 0;
padding: 0;
它应该可以工作。
100vh 应该将 html 的高度设置为视口的高度。
我想这种方式可行，但我不得不说，虽然我自己没有使用任何东西来让我的页面具有 100% 的屏幕高度。
【讨论】：
我同意我认为这种方法应该可行，但我不同意“Height 然而不将屏幕高度视为 100%”的说法，因为我已经这样做了我自己写了几页。 它不起作用，在我的html中添加 height: 100vh ，body标签导致相同的视图:( @Katana314 根据我的经验，它不起作用，但如果我的陈述在您的经验中不正确，那么我想我的经验缺乏 Mr.wiseguy 我很遗憾地说我不知道其他解决方案【参考方案4】：耶，呈现 HTML！
class="incident" 仅扩展至需要的大小。我相信您的解决方法应该是让 that 元素的高度为 70%（因为它将相对于整个页面），然后 eventContainer 的高度应该为 100%。
百分比高度是相对于父元素而非根元素的，因此您需要非常注意任何容器，即使是由框架悄悄添加的容器。
此外，如果有帮助，Jelmergu 建议使用 vh 单位类型。这可能适合您的用例 - 一个“视口高度”相当于“浏览器内容区域的 1%”。因此，100vh 将占据整个屏幕。即使在深层儿童身上也是如此。
【讨论】：
以上是关于HTML，正文高度 100% 不起作用的主要内容，如果未能解决你的问题，请参考以下文章
为啥 iframe 高度 100% 在 XHTML 页面中不起作用？ [复制]