Question

当我在html，body和包含所有其他元素的容器上设置高度100％时出现问题。

当我使用浏览器的开发者工具时，我发现html和正文的高度不是100％。谁能告诉我发生了什么？

<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>

Answer 1

您应该应用css定位以获得100％的高度，请尝试遵循css代码：

<body style="position:absolute; width:100%; height:100%; left:0; top:0; background-color:#f00; padding:0; margin:0;">

Answer 2

身体通常会添加一个边距，您需要手动将其删除：

<body style="height: 100%; background: #000; margin: 0; padding: 0">

Answer 3

可以设置块元素的高度，除非它包含在另一个100％高度div中。此外，对于绝对浏览器支持，您最好使用6位颜色代码。试试这个并分享结果：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000000;
}

Answer 4

使用 jQuery 执行此操作：

$(window).load(function () {
    var windowHeight = $(window).height(); // get window height
    $('html, body').height(windowHeight); // set window height to html & body
})

将高度100％设置为html和body

4 个答案: