如何将div盒子设置和浏览器一样的宽度和高度？附页面开关灯案例

今天做一个页面开关灯案例的时候遇见了以下问题：不知道怎么将div盒子设置成和浏览器一样的宽度和高度；开关灯按钮被覆盖了；第一个问题的解决方案如下<style>/* 将div的宽度和高度设置为100% */div {width: 100%;height: 100%;background-color: #fff;}/* 同时还要修改body和html的宽度和高度 */body,

Krlin_

7001人浏览 · 2021-04-07 07:54:31

Krlin_ · 2021-04-07 07:54:31 发布

今天做一个页面开关灯案例的时候遇见了以下问题：

不知道怎么将div盒子设置成和浏览器一样的宽度和高度；
开关灯按钮被覆盖了；

第一个问题的解决方案如下

<style>
    /* 将div的宽度和高度设置为100% */
    div {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    /* 同时还要修改body和html的宽度和高度 */
    body,
    html {
        height: 100%;
        overflow: hidden;
    }
</style>

第二个问题的解决方案

 <!-- 将button标签放入div盒子里面即可 -->
    <div>
        <button>开关</button>
    </div>

开关灯案例的完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 将div的宽度和高度设置为100% */
    div {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    /* 同时还要修改body和html的宽度和高度 */
    body,
    html {
        height: 100%;
        overflow: hidden;
    }
</style>

<body>
    <!-- 将button标签放入div盒子里面即可 -->
    <div>
        <button>开关</button>
    </div>

    <script>
        var btn = document.querySelector('button');
        var close = document.querySelector('div');
        var flag = 0;
        btn.onclick = function () {
            if (flag === 0) {
                close.style.backgroundColor = '#000';
                flag = 1;
            } else {
                close.style.backgroundColor = '#fff';
                flag = 0;
            }

        }
    </script>
</body>

</html>