设置div全屏

如何设置div的高度是body的高度的100%

如果直接设置div的高度为100%,那么是没有效果的,如下图所示:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <div style=" 100%;height: 100%; background: red;">111<div>
    </body>
</html>
复制代码

效果如下图所示,是没有效果的

原因是body的高度是默认为auto的,所以只要设置body的高度为100%,就能设置div全屏了

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,body{
                height: 100%;
                padding: 0px;
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <div style=" 100%;height: 100%; background: red;">111<div>
    </body>
</html>
复制代码

注意:一定要设置html和body,不能只设置body,否则也是没效果的。

设置完成后就有效果了

参考:https://zhidao.baidu.com/question/196792199.html 

原文地址:https://www.cnblogs.com/StarZhai/p/13954901.html