设置div全屏

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

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

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

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

设置完成后就有效果了

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

posted @ 2020-11-10 17:18  StarZhai  阅读(690)  评论(1)  编辑  收藏  举报