设置div全屏

本文转载自查看原文 2019-08-12 11:10 600 html+css+js

如何设置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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css设置div全屏 DIV高度设置全屏 div的全屏与退出全屏 angular实现指定DIV全屏 Android全屏设置及取消全屏设置 vm ubuntu如何设置全屏 android 设置全屏启动【Android】应用全屏设置 js设置页面全屏设置Dialog全屏显示