Set height 100% to html and body
Question
I have a problem when I set height 100% on html, body and the container which contains all the other elements.
When I use the developer tool of the browser, I see the height of the html and body are not 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 answers
solution1
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;">
solution2
0 2017-01-04 07:06:34
通常会在主体上添加一个边距，您需要使用以下方法手动将其删除：
<body style="height: 100%; background: #000; margin: 0; padding: 0">
solution3
0 2017-01-04 07:19:18
Height of a block element can be set unless it's included in another 100% height div. Also, for absolute browser support you better use 6 digits color codes. Try this and share the result please:
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
solution4
0 2017-01-04 07:57:23
Use jQuery to do this:
$(window).load(function () {
var windowHeight = $(window).height(); // get window height
$('html, body').height(windowHeight); // set window height to html & body
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.