將HTML和正文的高度設置為100％

Question

我在html，body和包含所有其他元素的容器上設置高度100％時遇到問題。

當我使用瀏覽器的開發人員工具時，我看到html和body的高度不是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
})

將HTML和正文的高度設置為100％

問題描述

4 個解決方案

解決方案1
0 2017-01-04 07:02:00

解決方案2
0 2017-01-04 07:06:34

解決方案3
0 2017-01-04 07:19:18

解決方案4
0 2017-01-04 07:57:23

將HTML和正文的高度設置為100％

問題描述

4 個解決方案

解決方案1 0 2017-01-04 07:02:00

解決方案2 0 2017-01-04 07:06:34

解決方案3 0 2017-01-04 07:19:18

解決方案4 0 2017-01-04 07:57:23

解決方案1
0 2017-01-04 07:02:00

解決方案2
0 2017-01-04 07:06:34

解決方案3
0 2017-01-04 07:19:18

解決方案4
0 2017-01-04 07:57:23