将HTML和正文的高度设置为100％
[英]Set height 100% to html and body
问题描述
I have a problem when I set height 100% on html, body and the container which contains all the other elements. 
我在html，body和包含所有其他元素的容器上设置高度100％时遇到问题。
When I use the developer tool of the browser, I see the height of the html and body are not 100% . 当我使用浏览器的开发人员工具时，我看到html和body的高度不是100％ 。 Can anyone tell me what happened? 谁能告诉我发生了什么事？
<html style="height: 100%;">
<head></head>
<body style="height: 100%; background: #000;">
<div class="container" style="height: 100%; margin: 0 30px; background: #ccc;">
<div style="min-height: 100%; text-align: center; font-size: 40px; line-height: 40px; color: #FFFFFF;">A</div>
<div style="min-height: 100%; text-align: center; font-size: 40px; line-height: 40px; color: #FFFFFF;">B</div>
<div style="min-height: 100%; text-align: center; font-size: 40px; line-height: 40px; color: #FFFFFF;">C</div>
</div>
</body>
</html>
4 个解决方案
解决方案1
0 2017-01-04 07:02:00
您应该应用css定位来获得100％的高度，请尝试使用以下css代码：
<body style="position:absolute; width:100%; height:100%; left:0; top:0; background-color:#f00; padding:0; margin:0;">
解决方案2
0 2017-01-04 07:06:34
通常会在主体上添加一个边距，您需要使用以下方法手动将其删除：
<body style="height: 100%; background: #000; margin: 0; padding: 0">
解决方案3
0 2017-01-04 07:19:18
Height of a block element can be set unless it's included in another 100% height div. 可以设置块元素的高度，除非它包含在另一个100％的高度div中。 Also, for absolute browser support you better use 6 digits color codes. 另外，为了获得绝对的浏览器支持，您最好使用6位数字的颜色代码。 Try this and share the result please: 试试这个并分享结果，请：
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
解决方案4
0 2017-01-04 07:57:23
Use jQuery to do this: 使用jQuery来做到这一点：
$(window).load(function () {
var windowHeight = $(window).height(); // get window height
$('html, body').height(windowHeight); // set window height to html & body
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.