設置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全屏顯示